function updateCharts(canvasDom, items) {
    const now = performance.now();
    const sum = document.querySelector("#sum").checked;
    const sumStores = document.querySelector("#sumstores").checked;
    const todayOnly = document.querySelector("#todayonly").checked;
    let startDate = document.querySelector("#start").value;
    let endDate = document.querySelector("#end").value;
    if (start > endDate) {
        let tmp = start;
        start = endDate;
        endDate = tmp;
    }
    showCharts(canvasDom, items, sum, sumStores, todayOnly, startDate, endDate);
    console.log("Updating charts took: " + (performance.now() - now) / 1000 + " seconds");
}
async function load() {
    const items = await loadItems();
    const chartDom = document.querySelector("#chart");
    const canvasDom = chartDom.querySelector("canvas");
    let lastHits = null;
    document.querySelector("#sum").addEventListener("change", () => updateCharts(canvasDom, lastHits));
    document.querySelector("#sumstores").addEventListener("change", () => updateCharts(canvasDom, lastHits));
    document.querySelector("#todayonly").addEventListener("change", () => updateCharts(canvasDom, lastHits));
    document.querySelector("#start").addEventListener("change", () => updateCharts(canvasDom, lastHits));
    document.querySelector("#end").addEventListener("change", () => updateCharts(canvasDom, lastHits));
    document.querySelector("#start").value = getOldestDate(items);
    document.querySelector("#end").value = currentDate();

    newSearchComponent(
        document.querySelector("#search"),
        items,
        (hits) => {
            items.forEach((item) => (item.chart = false));
            if (hits.length > 0) {
                chartDom.classList.remove("hide");
            } else {
                chartDom.classList.add("hide");
            }
            updateCharts(canvasDom, hits);
            lastHits = hits;
            return hits;
        },
        null,
        (header) => {
            header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis 📈</th><th></th>`);
            const showHideAll = header.querySelectorAll("th:nth-child(4)")[0];
            showHideAll.style["cursor"] = "pointer";
            showHideAll.showAll = true;
            showHideAll.addEventListener("click", () => {
                document
                    .querySelectorAll(".priceinfo")
                    .forEach((el) => (showHideAll.showAll ? el.classList.remove("hide") : el.classList.add("hide")));
                showHideAll.showAll = !showHideAll.showAll;
            });
            return header;
        },
        (item, itemDom, items, setQuery) => {
            const checked = (item.chart = (getQueryParameter("c") ?? []).includes(`${item.store}:${item.id}`));
            const dataId = item.store + ":" + item.id;
            const cell = dom("td", `<input type="checkbox" ${checked ? "checked" : ""} data-id="${dataId}">`);
            itemDom.appendChild(cell);
            const handleClick = (eventShouldSetQuery = false) => {
                item.chart = cell.children[0].checked;
                updateCharts(canvasDom, lastHits);
                !!eventShouldSetQuery && setQuery();
            };
            cell.children[0].addEventListener("click", handleClick);
            checked && handleClick();
            return itemDom;
        }
    );
    const query = getQueryParameter("q");
    if (query) {
        document.querySelector(".search").value = query;
        const inputEvent = new Event("input", {
            bubbles: true,
            cancelable: false,
        });
        document.querySelector(".search").dispatchEvent(inputEvent);
    }
}

load();