const highlightStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color: "rgba(0,0,125,0.1)"
    }),
    stroke: new ol.style.Stroke({
        color: "#3399CC",
        width: 2
    })
});

const vectorSource = new ol.source.Vector({
    url: "/static/maps/areas.kml",
    format: new ol.format.KML({
        extractStyles: false
    })
});

const vector = new ol.layer.Vector({
    source: vectorSource
});

const tiles = new ol.layer.Tile({
    source: new ol.source.OSM()
});

const map = new ol.Map({
    layers: [tiles, vector],
    target: "map",
    view: new ol.View({
        center: ol.proj.fromLonLat([17.5, 42.5]),
        zoom: 4,
        multiWorld: true
    })
});

var selected = [];

const tileslist = document.getElementById("status");

function selected_changed() {
    if (selected.length > 0) {
        selected.sort((a, b) => (a.get("description") > b.get("description")) ? 1: -1)
        const formMaprequest = document.forms['maprequest'];
        tileslist.innerHTML = " " + selected.length + " Kacheln ausgewählt: ";
        formMaprequest.tiles.value = "";
        formMaprequest.tilesdesc.value = "";
        for (let i = 0; i < selected.length; i++) {
            tileslist.innerHTML = tileslist.innerHTML + selected[i].get("description") + "&nbsp;";
            formMaprequest.tiles.value = formMaprequest.tiles.value + "+" + selected[i].get("name");
            formMaprequest.tilesdesc.value = formMaprequest.tilesdesc.value + "+" + selected[i].get("description");
        }
    } else {
        tileslist.innerHTML = "&nbsp;keine Kacheln ausgewählt";
    }
};

// a DragBox interaction used to select features by drawing boxes
const dragBox = new ol.interaction.DragBox({
    condition: ol.events.condition.platformModifierKeyOnly,
});

map.addInteraction(dragBox);

dragBox.on('boxend', function () {
    const extent = dragBox.getGeometry().getExtent();
    const boxFeatures = vectorSource
        .getFeaturesInExtent(extent)
        .filter((feature) => feature.getGeometry().intersectsExtent(extent));
    boxFeatures.forEach(function(f) {
        const selIndex = selected.indexOf(f);
        if (selIndex < 0) {
            selected.push(f);
            f.setStyle(highlightStyle);
        }
    });
    selected_changed();
});

dragBox.on('boxstart', function() {
    selected.forEach(function(f) {
        f.setStyle(undefined);
    });
    selected = [];
    selected_changed();
});

map.on("singleclick", function (e) {
    map.forEachFeatureAtPixel(e.pixel, function (f) {
        const selIndex = selected.indexOf(f);
        if (selIndex < 0) {
            selected.push(f);
            f.setStyle(highlightStyle);
        } else {
            selected.splice(selIndex, 1);
            f.setStyle(undefined);
        }
    });
    selected_changed();
});