var map, googleLayer, nostraGuideLayer;

nostra.onready = function () {
    nostra.config.Language.setLanguage(nostra.language.E);
    initialize();
};

function initialize() {
    map = new nostra.maps.Map("map", {
        id: "mapTest",
        logo: false,
        scalebar: false,
        basemap: "streetmap",
        slider: false,
        level: 15,
        lat: 13.722944,
        lon: 100.530449,
        country: 'TH'
    });

    map.events.load = function () {
        /* Create Google Layer */
        googleLayer = new nostra.maps.layers.GoogleMapsLayer(map, {
            googleKey: {YOUR_GOOGLE_KEY},
            mapType: "roadmap",
            language: "TH",
            traffic: false,
            transit: false
        });

        googleLayer.events.load = () => spinner(false)

        /* Create nostraGuideLayer */
        nostraGuideLayer = new nostra.maps.layers.AGSLayer(map, {
            id: "nostraGuide",
            type: "dynamic",
            url: "https://mapdynamic.nostramap.com/arcgis/rest/services/NOSTRAGuide/MapServer",
            token:{YOUR_NOSTRA_KEY}
        });

        map.addLayer(googleLayer);
        map.addLayer(nostraGuideLayer);

    }

    map.events.click = (e) => identify(e)
}

function identify(e) {
    spinner(true)
    map.map.infoWindow.hide();

    let lat = e.mapPoint.getLatitude();
    let lon = e.mapPoint.getLongitude();

    nostraGuideLayer.identify(lat, lon, function (response) {
        let result = response.result;
        if (result != null && result.length > 0) {
            showInfoWindow(e, result[0])
        }
        spinner(false)
    })
}

function onTrafficCheck(event) {
    event.checked ? googleLayer.setTrafficVisible(true) : googleLayer.setTrafficVisible(false);
}

function onTransitCheck(event) {
    event.checked ? googleLayer.setTransitVisible(true) : googleLayer.setTransitVisible(false);
}

/* UI Interect function */
function switchMenu(type) {
    let TrafficLayer = document.getElementById("TrafficLayer"), 
        TransitLayer = document.getElementById("TransitLayer");
    switch (type) {
        case "Roadmap":
            googleLayer.setMapType("roadmap")
            TrafficLayer.disabled = false;
            TransitLayer.disabled = false;
            break;
        case "Hybrid":
            googleLayer.setMapType("hybrid")
            TrafficLayer.disabled = false;
            TransitLayer.disabled = false;
            break;
        case "Terrain":
            googleLayer.setMapType("terrain")
            TrafficLayer.disabled = false;
            TransitLayer.disabled = false;
            break;
        case "Satellite":
            googleLayer.setMapType("satellite")
            TrafficLayer.disabled = true;
            TransitLayer.disabled = true;
            break;

        default:
            break;
    }

}

function showInfoWindow(e, result) {
    var strInfo = "";
    for (var key in result.feature.attributes) {
        var valResult = result.feature.attributes[key];
        strInfo += "<b>" + key + "</b>: " + ((valResult != "NULL") ? valResult : "-") + "<br />";
    }
    map.map.infoWindow.setTitle("Identify Result");
    map.map.infoWindow.setContent(strInfo);
    map.map.infoWindow.show(e.screenPoint, map.map.getInfoWindowAnchor(e.screenPoint));
    spinner(false);
}

function spinner(isLoading) {
    const spin = document.getElementById("spinner");
    isLoading ? spin.style.display = "flex" : spin.style.display = "none";
}