import { Temporal } from "temporal-polyfill";
import { 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");
const {timeZoneId: tzId} = Temporal.Now.zonedDateTimeISO();
renderShowsBtn.addEventListener("click", () => {
	renderShows();
	search.value = "";
});

function dateString(date, small = false) {
	date = date + "+00:00";
	if (small) {
		return Temporal.Instant.from(date).toZonedDateTimeISO(tzId).toPlainDateTime().toLocaleString("nb-NO", {
			weekday: "long",
			calendar: "gregory",
			hour: "2-digit",
			minute: "2-digit",
			month: "long",
			day: "numeric"
		});
	}
	return Temporal.Instant.from(date).toZonedDateTimeISO(tzId).toPlainDateTime().toLocaleString("nb-NO", {
		weekday: "long",
		calendar: "gregory",
		hour: "2-digit",
		minute: "2-digit",
		era: "long",
		year: "numeric",
		month: "long",
		day: "numeric"
	});
}

search.addEventListener("input", e => renderShows(e.currentTarget.value));

async function renderShows(query) {
	query = query?.trim();
	const searchParams = new URLSearchParams(location.search);
	if (!query && searchParams.has("q")) {
		query = searchParams.get("q");
	}
	searchParams.set("q", query);
	let lis = [];

	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`,
			text: "",
			url: `#${show.title}-${show.startDateTime}`,
		};
		await navigator.share(shareData);
	}

	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 && !showKey.toLowerCase().match(query.toLowerCase())) {
			continue;
		}
		if (times.every(e => e.ticketUrl === "")) {
			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 => t("li", {class: `time time-${e.id}`, id: `${showKey}-${e.startDateTime}`}, [t("a", undefined, [
				t("div", undefined, [
					t("span", {title: e.startDateTime}, dateString(e.startDateTime)),
					t("span", undefined, `${e.scene} - ${[e.type, ...e.tags].join(", ")}`),
					t("div", {class: "actions"}, [
						t("a", {href: e.ticketUrl}, "Billetter"),
						t("button", {onclick: () => share(e)}, "Del tid")
					])
				])
			])])))])]));
	}
	ulShows.replaceChildren(...lis);
}

renderShows();