import { Temporal } from "temporal-polyfill";
import { gqp, sqp, t } from "./framework.js";

let _;

async function getShows() {
    if (_) return _;
    const response = await fetch("/shows");
    _ = await response.json();
    return _;
}

const ulShows = document.getElementById("ulShows");
const search = document.getElementById("search");
const renderShowsBtn = document.getElementById("renderShowsBtn");

renderShowsBtn.addEventListener("click", () => {
    renderShows("");
    search.value = "";
});

function dateString(date, small = false) {
    const instant = Temporal.Instant.from(`${date}Z`)
    const stringOptions = {
        weekday: "long",
        hour: "2-digit",
        timeZone: "UTC",
        minute: "2-digit",
        month: "long",
        calendar: "gregory",
        day: "numeric"
    }

    if (small) {
        return instant.toLocaleString("nb-NO", stringOptions);
    }

    return instant.toLocaleString("nb-NO", {
        year: "numeric",
        era: "long",
        ...stringOptions
    });
}

function copyLink(t, e) {
    const initialInnerText = t.target.innerText;
    if ("clipboard" in navigator) {
        navigator.clipboard.writeText(`${location.origin}/index.html#${urlId(e)}`)
        t.target.innerText = `${initialInnerText} ✓`
        setTimeout(() => {
            t.target.innerText = initialInnerText
        }, 1000)
    }
}

function vegascene(e) {
    if (e.movieMainVersion.startsWith("KUL")) return `https://www.vegascene.no/teater/${e.movieMainVersion}`
    return `https://www.vegascene.no/film/${e.movieMainVersion}`
}

function urlId(e) {
    return `${e.movieVersion}${e.startDateTime}`.replaceAll("-", "").replaceAll(" ", "").replaceAll(":", "")
}

async function renderShows(query, rendered) {
    query = query?.trim();
    sqp({ q: query ?? "" })

    const shows = (await getShows()).reduce((acc, curr) => {
        const key = curr.title;
        if (!acc[key]) {
            acc[key] = [];
        }
        acc[key].push(curr);
        return acc;
    }, {});

    async function share(show) {
        const shareData = {
            title: `${show.title} ${dateString(show.startDateTime, true)} på vega`,
            url: `${location.origin}/index.html#${urlId(show)}`,
        }
        await navigator.share(shareData);
    }

    const lis = [];

    for (const showKey of Object.keys(shows).sort((a, b) => a.localeCompare(b))) {
        const times = shows[showKey].sort((a, b) => Temporal.PlainDate.compare(Temporal.PlainDate.from(a.startDateTime), Temporal.PlainDate.from(b.startDateTime)))
        if (query) {
            const words = [showKey.toLowerCase()]
            for (const time of times) {
                words.push(dateString(time.startDateTime))
                words.push(time.scene)
                words.push(time.tags.join(" "))
            }
            if (!words.some((word) => word.match(query.toLowerCase()))) continue;
        }

        lis.push(
            t("li", { class: "show", id: showKey }, [
                t("span", { class: "title italic" }, showKey),
                t("ul", undefined, [
                    t("li", undefined,
                        times.filter(e => e.ticketUrl !== "").map(e => {
                            let tagLine = `${e.scene} - ${[e.type, ...e.tags].join(", ")}`
                            tagLine = tagLine[0].toUpperCase() + tagLine.slice(1)
                            return t("li", { class: `time time-${e.id}`, id: urlId(e) }, [
                                t("div", undefined, [
                                    t("span", { title: e.startDateTime }, dateString(e.startDateTime)),
                                    t("span", undefined, tagLine),
                                    t("div", { class: "actions" }, [
                                        t("a", { href: e.ticketUrl }, "Billetter"),
                                        "share" in navigator ? t("button", { onclick: () => share(e) }, "Del tid") : null,
                                        t("button", { onclick: (t) => copyLink(t, e) }, "Kopier lenke"),
                                        t("a", { href: vegascene(e) }, "Åpne på vegascene.no")
                                    ])
                                ])
                            ])
                        }))
                ])
            ])
        )
    }

    if (!lis.length) ulShows.replaceChildren(...[t("i", undefined, "Dessverre")])
    else ulShows.replaceChildren(...lis);

    const interval = setInterval(() => {
        const element = document.querySelector("#ulShows");
        if (element.childNodes.length > 0) {
            clearInterval(interval);
            rendered();
        }
    }, 50);
}

renderShows(search.value, () => {
    if (gqp("q")) search.value = gqp("q")
    search.addEventListener("input", e => renderShows(e.currentTarget.value));
    const id = location.href.indexOf("#") !== -1 ? location.href.substring(location.href.indexOf("#")) : ""
    if (id !== "") {
        const target = document.querySelector(id)
        target.scrollIntoView({ behavior: "smooth", block: "center" })
        target.classList.add("activeShow")
        document.querySelectorAll(".time").forEach(el => el.id !== id.slice(1) && el.classList.remove("activeShow"))
    }
});