// const apiBaseUrl = "https://routemon-api.fautchen.eu";
const apiBaseUrl = "http://localhost:8284";

const dialog = document.querySelector("dialog");
const closeButton = document.querySelector("dialog button");
closeButton.addEventListener("click", () => {
    dialog.close();
});

let map = L.map("map");

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

let layerGroup = L.layerGroup().addTo(map);

document.forms["gpx-upload-form"].addEventListener("submit", (event) => {
    event.preventDefault();
    const gpxFileInput = document.getElementById("gpx-file-input");
    if (gpxFileInput.files.length !== 1) {
        alert("Voor de upload moet er exact één GPX-bestand zijn geselecteerd");
        return;
    }
    load(gpxFileInput.files[0]);
});

function el(name, attrs, ...children) {
    const node = document.createElement(name);
    for (const [k, v] of Object.entries(attrs)) {
        node.setAttribute(k, v);
    }
    node.replaceChildren(...children);
    return node;
}

function txt(s) {
    return document.createTextNode(s);
}

function tbl(rowcols) {
    return el("table", {},
              el("tbody", {},
                 ...rowcols.map((cols) =>
                     el("tr", {},
                        ...cols.map((col) => el("td", {}, col)),
                       ))));
}

async function showProblem(rsp) {
    const problem = await rsp.json();

    document.getElementById("dialog-title").innerText = problem.title;
    if (problem.detail)
        document.getElementById("dialog-message").innerText = problem.detail;
    else
        document.getElementById("dialog-message").innerText = "";
    dialog.showModal();

    let rows = [
        [txt("HTTP-statuscode"),
         el("a", { "href": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/" + rsp.status },
            txt(rsp.status + " (" + rsp.statusText + ")"))],
        [txt("Probleemtype"),
         el("code", {}, txt(problem.type))],
        [txt("Trace-ID"),
         el("code", {}, txt(rsp.headers.get("X-Routemon-Trace-Id")))],
    ];
    if (problem.instance) {
        rows.push([txt("Instantie"),
                   el("code", {}, txt(problem.instance))]);
    }
    document.getElementById("dialog-more-info").replaceChildren(tbl(rows));

    return;
}

async function getSysinfo() {
    const rsp = await fetch(apiBaseUrl + "/sysinfo", {
        method: "GET",
        headers: {
            "Accept-Language": "nl-NL",
        },
    });
    if (!rsp.ok) {
        await showProblem(rsp);
        return;
    }

    const res = await rsp.json();
    let rows = [
        [el("span", { "class": "help-cursor",
                      "title": "Publicatietijdstip van ingeladen DATEX II-situatiepublicatie (van NDW)" },
            txt("Situatiepublicatie van")),
         txt(new Date(res.using_publication_of).toLocaleString())],
        [txt("Grootte BLSE-index"),
         txt(res.blse_index_size.toString())],
        [txt("Grootte BPE-index"),
         txt(res.bpe_index_size.toString())],
    ];
    document.getElementById("sysinfo-details").replaceChildren(tbl(rows));
}

async function load(gpxFile) {
    const rsp = await fetch(apiBaseUrl + "/gpx", {
        method: "POST",
        headers: {
            "Accept-Language": "nl-NL",
        },
        body: gpxFile,
    });
    if (!rsp.ok) {
        await showProblem(rsp);
        return;
    }

    const res = await rsp.json();
    layerGroup.clearLayers();

    let bounds = null;
    for (const track of res.tracks) {
        for (const segment of track.segments) {
            const polyline = L.polyline(segment.points, { color: "blue" }).addTo(layerGroup);
            if (bounds === null) {
                bounds = polyline.getBounds();
            } else {
                bounds.extend(polyline.getBounds());
            }
        }
    }
    if (bounds !== null) {
        map.fitBounds(bounds);
    }

    res.relevant_situations.forEach((sit) => {
        let firstComment = sit.comments[0] || "";
        const lfIndex = firstComment.indexOf("\n");
        if (lfIndex !== -1) {
            firstComment = firstComment.substring(0, lfIndex);
        }
        const commentEl =
              el("div", {},
                 el("code", {}, txt(sit.id)),
                 txt(": " + firstComment));

        // TODO: decide what to do if the situation has no location
        if (sit.location) {
          const markerLayer = L.marker(sit.location);
          markerLayer.addTo(layerGroup).bindPopup(commentEl);
        }

        sit.relevant_road_closures.forEach((rc) => {
            rc.relevant_lss.forEach((ls) => {
                const lineLayer = L.polyline(ls, {
                    color: "purple",
                    dashArray: "5, 10",
                    dashOffset: "0",
                });
                lineLayer.addTo(layerGroup);
            });
        });
    });
}

getSysinfo();