var iconSize = [70, 72];
var polylineWidth = 5;
var refreshPeriod;
var iconUrlTravelTime = [
    BASE_URL + "/public/images/map/tt3/icon-pointer-ok.png",
    BASE_URL + "/public/images/map/tt3/icon-pointer-error.png",
    BASE_URL + "/public/images/map/tt3/icon-pointer-cong.png",
    BASE_URL + "/public/images/map/tt3/icon-pointer-no-data.png",
];
var iconsConfiguration = [
    BASE_URL + "/public/images/traveltime3/map/det.png",
    BASE_URL + "/public/images/traveltime3/map/bt.png",
    BASE_URL + "/public/images/traveltime3/map/mix.png",
    BASE_URL + "/public/images/traveltime3/map/wim.png",
    BASE_URL + "/public/images/traveltime3/map/start.png",
    BASE_URL + "/public/images/traveltime3/map/end.png",
];

function init(sections) {
    initMap(sections);
    setTimeUpdater();
    var window = document.getElementById("window");
    L.DomEvent.disableScrollPropagation(window);
    L.DomEvent.disableClickPropagation(window);
}

function initMap(sections) {
    generateMap("map", 8);

    if (!Array.isArray(sections) && Object.values(sections).length) {
        for (let id in sections) {
            var section = sections[id];
            setStartPoint(section);
            addCoordinations(section.end_lat, section.end_lng);
            setPath(section);
            resizeIcon(id);
        }
    }

    setCoords();
}

function setStartPoint(section) {
    addCoordinations(section.start_lat, section.start_lng);
    var options = {
        coordinations: [section.start_lat, section.start_lng],
        icon: setIcon({
            iconSize: iconSize,
            iconAnchor: [iconSize[0] / 2, iconSize[1]],
            iconUrl: setIconUrl(section.status),
        }),
    };
    setMarker(section.map_section, options);
    var args = { mapSection: section.map_section };
    setMarkerClickEvent(
        section.map_section,
        options.icon.options,
        openSectionDetail,
        args
    );
}

function setPath(section) {
    positions = JSON.parse(section.position_list)._stack;
    var latLngs = [];
    positions.forEach(function (x) {
        latLngs.push([x._lat, x._lng]);
    });
    polylines[section.map_section] = L.polyline(latLngs, {
        color: section.color,
        weight: polylineWidth,
        opacity: 0.5,
    }).addTo(map);
    markers[section.map_section].on("mouseover", function () {
        polylines[section.map_section].setStyle({ weight: polylineWidth * 2 });
    });
    markers[section.map_section].on("mouseout", function () {
        polylines[section.map_section].setStyle({ weight: polylineWidth });
    });
    map.fitBounds(polylines[section.map_section].getBounds());
}

function setIconUrl(state) {
    var url;

    switch (state) {
        case "ok":
            url = iconUrlTravelTime[0];
            break;
        case "largeCong":
            url = iconUrlTravelTime[1];
            break;
        case "smallCong":
            url = iconUrlTravelTime[2];
            break;
        case "nodata":
            url = iconUrlTravelTime[3];
            break;
    }

    return url;
}

function openSectionDetail(args) {
    openModalWindow(
        "modalSectionDetail",
        1,
        "/TravelTime3/map/modal/mapSection/" + args.mapSection
    );
}

function toggleWindowTab(thisElement) {
    if ($("windowBody").style.display == "none") {
        $("windowBody").style.display = "";
        thisElement.style.backgroundColor = "#FFFFFF";
        thisElement.querySelector("img").src =
            BASE_URL + "/public/images/map/arrow-close.png";
    } else {
        $("windowBody").style.display = "none";
        thisElement.style.backgroundColor = "#EEEEEE";
        thisElement.querySelector("img").src =
            BASE_URL + "/public/images/map/arrow-open.png";
    }
}

function redrawMap() {
    var rows = $("windowBody").querySelector("table tbody").rows;

    for (let i = 0; i < rows.length; i++) {
        var input = rows[i].querySelector("input");

        if (input.checked) {
            if (!map.hasLayer(markers[input.name])) {
                map.addLayer(markers[input.name]);
                map.addLayer(polylines[input.name]);
            }
        } else {
            if (map.hasLayer(markers[input.name])) {
                map.removeLayer(markers[input.name]);
                map.removeLayer(polylines[input.name]);
            }
        }
    }
}

function setTimeUpdater() {
    new Camea.Updater(refreshPeriod, function (updater) {
        update(updater);
    })
        .setTimerLabel("counter")
        .startOnce();
}

function update(updater) {
    new Ajax.Request(BASE_URL + "/TravelTime3/map/get-actual-data/", {
        method: "get",
        onSuccess: function (res) {
            var data = JSON.parse(atob(res.responseText));
            resetMap(data);
        },
        onCreate: function () {
            updater.process("aktualizuji");
        },
        onComplete: function () {
            updater.startOnce();
        },
    });
}

function resetMap(data) {
    coordinations = [];
    deleteMap();
    initMap(data);
    redrawMap();
}

function setRefreshPeriod(value) {
    refreshPeriod = value;
}

function resizeIcon(id) {
    map.on("zoomend", function () {
        var zoom = map.getZoom();
        var minZoom = map.getMinZoom();
        var maxZoom = map.getMaxZoom();
        var minIconSize = [14, 14];
        zoom = Math.max(zoom - minZoom, 0);
        var width =
            zoom *
                (100 / (maxZoom - minZoom) / 100) *
                (iconSize[0] - minIconSize[0]) +
            minIconSize[0];
        var height =
            zoom *
                (100 / (maxZoom - minZoom) / 100) *
                (iconSize[1] - minIconSize[1]) +
            minIconSize[1];
        var newSize = [parseInt(width), parseInt(height)];
        var url = markers[id].getIcon().options.iconUrl;
        markers[id].setIcon(
            L.icon({
                iconSize: newSize,
                iconAnchor: [newSize[0] / 2, newSize[1]],
                iconUrl: url,
            })
        );
        markers[id].on("click", function () {
            markers[id].setIcon(
                L.icon({
                    iconSize: newSize,
                    iconAnchor: [newSize[0] / 2, newSize[1]],
                    iconUrl: url,
                })
            );
        });
    });
}

function initMapConfiguration(mapData) {
    generateMap("map", 8);
    addEndPoints(mapData);
    setRoutePath(mapData.position_list);
    addSlicesMarkers(mapData.slices);
    addUnusedSensors(mapData.unused_sensors);
    setCoords();
}

function setRoutePath(positionsList) {
    var positions = positionsList._stack.map((position) => ({
        lat: parseFloat(position._lat),
        lng: parseFloat(position._lng),
    }));
    var options = {
        coordinations: positions,
        polylineOptions: {
            weight: 6,
            color: "#0F0",
        },
    };
    setPolyline("path", options);
}

function addSlicesMarkers(slices) {
    for (key in slices) {
        var slice = slices[key];
        addCoordinations(slice.position.lat, slice.position.lng);
        var options = {
            coordinations: [slice.position.lat, slice.position.lng],
            tooltip: true,
            tooltipContent: slice.id,
            popup: true,
            popupContent: setPopupContent(slice),
            icon: setIcon({
                iconSize: [15, 15],
                iconUrl: setIconUrlConfiguration(slice.sensors),
                tooltipAnchor: [10, 0],
            }),
        };
        setMarker(slice.id, options);
    }
}

function setIconUrlConfiguration(sensors) {
    var sensors = Object.values(sensors);
    var types = [];
    sensors.forEach((sensor) => {
        if (types.includes(sensor.type)) {
            return;
        }

        types.push(sensor.type);
    });

    if (types.length > 1) {
        return iconsConfiguration[2];
    } else if (types.includes("DETECTOR")) {
        return iconsConfiguration[0];
    } else if (types.includes("BLUETOOTH")) {
        return iconsConfiguration[1];
    }
}

function addEndPoints(mapData) {
    addCoordinations(mapData.start_lat, mapData.start_lng);
    var options = {
        coordinations: [mapData.start_lat, mapData.start_lng],
        icon: setIcon({
            iconSize: [27, 27],
            iconUrl: iconsConfiguration[4],
            iconAnchor: [13, 13],
        }),
        rotationAngle: countAzimuth(
            mapData.start_lat,
            mapData.start_lng,
            mapData.position_list._stack[1]._lat,
            mapData.position_list._stack[1]._lng
        ),
    };
    setMarker("start", options);
    addCoordinations(mapData.end_lat, mapData.end_lng);
    var options = {
        coordinations: [mapData.end_lat, mapData.end_lng],
        icon: setIcon({
            iconSize: [27, 19],
            iconUrl: iconsConfiguration[5],
            iconAnchor: [13, 13],
        }),
        rotationAngle: countAzimuth(
            mapData.position_list._stack[
                mapData.position_list._stack.length - 2
            ]._lat,
            mapData.position_list._stack[
                mapData.position_list._stack.length - 2
            ]._lng,
            mapData.end_lat,
            mapData.end_lng
        ),
    };
    setMarker("end", options);
}

function setPopupContent(slice) {
    var content = document.createElement("div");
    content.innerHTML = slice.id;
    content.innerHTML += "<hr>";
    var sensors = Object.values(slice.sensors);
    sensors.forEach((sensor) => {
        content.innerHTML += sensor.id + " (" + sensor.type + ")<br>";
    });

    return content;
}

function addUnusedSensors(sensors) {
    for (sensor in sensors) {
        addCoordinations(sensors[sensor].lat, sensors[sensor].lng);
        var options = {
            coordinations: [sensors[sensor].lat, sensors[sensor].lng],
            tooltip: true,
            tooltipContent: sensor,
            icon: setIcon({
                iconSize: [10, 10],
                iconUrl: iconsConfiguration[3],
                tooltipAnchor: [10, 0],
            }),
        };
        setMarker(sensor, options);
    }
}

function showOutputSection() {
    var outputSection = $("outputSectionSelect").value;

    new Ajax.Request(BASE_URL + "/TravelTime3/configuration/update-map/", {
        method: "post",
        parameters: { outputSection: outputSection },
        onComplete: function (response) {
            updateMap(response);
        },
        onCreate: function () {
            $("map").update("Zpracovávám...");
        },
    });

    new Ajax.Request(BASE_URL + "/TravelTime3/configuration/update-graph/", {
        method: "post",
        parameters: { outputSection: outputSection },
        onComplete: function (response) {
            $("graph").update(response.responseText);
        },
        onCreate: function () {
            $("graph").update("Zpracovávám...");
        },
    });
}

function updateMap(response) {
    clearMap();
    deleteMap();
    var mapData = response.responseText.evalJSON();
    initMapConfiguration(mapData);
}