"use strict";

function getMembersRow(x, y, w=1236) {
    const r = 1236 / w;
    x *= r;
    y *= r;
    if (x <= 12 || x > 346) return -1;
    const row = Math.floor((y - 113) / 20.5);
    return (row >= 0 && row < 5) ? row : -1;
}

function getDeliveriesRow(x, y, w=1136) {
    const r = 1136 / w;
    x *= r;
    y *= r;
    if (x <= 12 || x > 395) return -1;
    const row = Math.floor((y - 120) / 20.5);
    return (row >= 0 && row < 2) ? row : -1;
}

function getDeliveryPartsRow(x, y, w=1136) {
    const r = 1136 / w;
    x *= r;
    y *= r;
    if (x <= 424 || x > 753) return [-1, -1];
    const win = document.getElementsByClassName("window")[1];
    const idx = Array.prototype.indexOf.call(win.children, win.getElementsByClassName("selected")[0]);
    const len = {1: 2, 2: 2, 3: 3, 4: 3, 5: 3}[idx] ?? 0;
    const row = Math.floor((y - 319) / 20);
    return [{0: 0, 1: 1, 2: 1, 3: 2, 4: 2, 5: 2}[idx], len === 0 ? -1 : (row >= 0 && row < len) ? row : -1];
}

document.addEventListener("DOMContentLoaded", () => {
    const windows = document.getElementsByClassName("window");

    const w1 = windows[0];
    const canvas1 = w1.getElementsByTagName("canvas")[0];
    const ctx1 = canvas1.getContext("2d");
    w1.addEventListener("mousemove", (evt) => {
        ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
        const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
        if (row === -1) return;
        ctx1.fillStyle = "#0078d740";
        ctx1.fillRect(12, 113 + 20.5 * row, 334, 20.5);
    });
    w1.addEventListener("click", (evt) => {
        const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
        for (const img of w1.getElementsByTagName("img")) img.classList.remove("selected");
        w1.getElementsByTagName("img")[row + 1].classList.add("selected");
    });

    const w2 = windows[1];
    const canvas2 = w2.getElementsByTagName("canvas")[0];
    const ctx2 = canvas2.getContext("2d");
    w2.addEventListener("mousemove", (evt) => {
        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
        const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
        const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth)[1];
        if (row !== -1) {
            ctx2.fillStyle = "#0078d740";
            ctx2.fillRect(12, 120 + 20.5 * row, 383, 20.5);
        } else if (partRow !== -1) {
            ctx2.fillStyle = "#0078d740";
            ctx2.fillRect(424, 319 + 20 * partRow, 329, 20);
        }
    });
    w2.addEventListener("click", (evt) => {
        const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
        const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
        if (row !== -1 || partRow[1] !== -1) {
            const idx = row !== -1 ? row * 2 + 1 : (partRow[0] - 1) * 2 + partRow[1] + 1;
            for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
            w2.getElementsByTagName("img")[idx].classList.add("selected");
        } else {
            for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
            w2.getElementsByTagName("img")[0].classList.add("selected");
        }
    });
});

document.addEventListener("keydown", (evt) => {
    const act = document.activeElement;
    if (!act.classList.contains("window")) return;
    let el = null;
    if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
        el = act.getElementsByClassName("selected")[0].previousElementSibling;
        evt.stopImmediatePropagation();
        evt.preventDefault();
    } else if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
        el = act.getElementsByClassName("selected")[0].nextElementSibling;
        evt.stopImmediatePropagation();
        evt.preventDefault();
    }
    if (el && el.tagName === "IMG") {
        for (const img of act.getElementsByTagName("img")) img.classList.remove("selected");
        el.classList.add("selected");
    }
});