import { fromEvent, merge, timer, zip } from "rxjs";
import {
	tap,
	exhaustMap,
	map,
	mapTo,
	mergeMap,
	pairwise,
	share,
	startWith,
	switchMap,
	takeUntil,
	filter,
} from "rxjs/operators";
import { webComponentsReady, importTemplate, stylesheetReady } from "./common";

(async () => {
	await Promise.all([
		...("customElements" in window
			? []
			: [
					import(
						/* webpackChunkName: "webcomponents" */ "./polyfills/webcomponents.js"
					).then(
						() =>
							import(
								/* webpackChunkName: "shadydom" */ "./polyfills/shadydom.js"
							),
					),
				]),
	]);

	await webComponentsReady;
	await stylesheetReady;

	const SEL_NAVBAR_BTN_BAR = "#_navbar > .content > .nav-btn-bar";

	const search = importTemplate("_search-template");
	const pushStateEl = document.querySelector("hy-push-state");

	if (!pushStateEl || !search) return;

	await import(/* webpackMode: "eager" */ "@honeymachine/search");

	const navbarEl = document.querySelector(SEL_NAVBAR_BTN_BAR);
	navbarEl?.insertBefore(search, navbarEl.querySelector(".nav-insert-marker"));

	const searchBtn = document.getElementById("_search");
	const searchEl = document.querySelector("hm-search");

	const documents = await fetch("/search.json").then((r) => r.json());

	searchEl.setAttribute("documents", JSON.stringify(documents));
	searchEl.setAttribute(
		"fields",
		JSON.stringify(["title", "description", "category", "tags"]),
	);

	const start$ = fromEvent(pushStateEl, "hy-push-state-start");
	const ready$ = fromEvent(pushStateEl, "hy-push-state-after");
	const search$ = fromEvent(searchEl, "search");
	const click$ = fromEvent(searchBtn, "click");

	let articles = (" " + document.getElementById("_main").innerHTML).slice(1);

	const reset = () => {
		const result = document.getElementById("_main");
		result.classList.remove("search-results");
		result.innerHTML = articles;
		result.querySelectorAll("img, h1").forEach((article) => {
			article.setAttribute("style", "opacity: 1;");
		});
	};

	start$.subscribe(() => {
		searchEl.clear();
		reset();
	});

	ready$.subscribe(() => {
		const result = document.getElementById("_main");
		if (result.innerHTML) {
			articles = (" " + result.innerHTML).slice(1);
		}
	});

	search$.subscribe((e) => {
		const result = document.getElementById("_main");
		const hits = e.detail;

		if (hits.length === 0) {
			reset();
		} else {
			result.classList.add("search-results");
			result.innerHTML = "";
			hits.forEach((hit) => {
				const item = documents.find((doc) => doc.id === hit.ref);
				const articleEl = document.createElement("article");
				articleEl.classList.add("search-result", "page", "post", "mb6");
				articleEl.setAttribute("role", "article");
				articleEl.setAttribute("id", "post-" + item.id);
				articleEl.innerHTML = `
<header>
  <h1 class="post-title flip-project-title">
    <a href="${item.url}" class="flip-title">${item.title}</a>
  </h1>
  <a
    href="${item.url}"
    class="no-hover no-print-link flip-project"
    tabindex="-1"
    >
    <div class="img-wrapper lead aspect-ratio sixteen-nine flip-project-img">
      <img
        src="${item.image}"
        alt="${item.title}"
        width="864"
        height="486"
        loading="lazy"
      />
    </div>
  </a>
  <p class="note-sm">
    ${item.description}
  </p>
</header>
`;

				result.appendChild(articleEl);
			});
		}
	});

	click$.subscribe(() => {
		searchEl.hidden = !searchEl.hidden;
		!searchEl.active ? searchEl.focus() : searchEl.clear();
		searchEl.setAttribute("aria-expanded", !searchEl.hidden);
	});
})();