---
import AgeRestrictedScriptInline from "./AgeRestrictedScriptInline.astro";
import { IconTriangleExclamation } from "./icons";
---

<div
  style={{ display: "none" }}
  id="modal-age-restricted"
  class="fixed inset-0 bg-stone-100 dark:bg-stone-900"
  role="dialog"
  aria-labelledby="title-age-restricted"
>
  <div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
    <div class="text-bm-500 dark:text-bm-400">
      <IconTriangleExclamation width="3rem" height="3rem" />
    </div>
    <div
      id="title-age-restricted"
      class="pb-3 pt-2 text-3xl font-light text-stone-700 sm:pb-4 sm:pt-2 dark:text-stone-50"
    >
      Age verification
    </div>
    <div
      class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl text-stone-700 dark:border-stone-300 dark:text-stone-50"
    >
      You must be 18+ to access this page.
    </div>
    <p class="px-8 text-lg font-light leading-snug text-stone-700 sm:max-w-2xl dark:text-stone-50">
      By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
      screen from appearing in the future.
    </p>
    <div
      style={{ display: "none" }}
      id="age-verification-button-list"
      class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 sm:max-w-2xl sm:flex-row"
    >
      <button
        data-modal-reject
        id="age-verification-reject"
        class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-stone-300 dark:text-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
      >
        Cancel
      </button>
      <button
        data-modal-accept
        id="age-verification-accept"
        class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
      >
        I'm at least 18 years old
      </button>
    </div>
  </div>
</div>

<AgeRestrictedScriptInline />

<script>
  const ageRestrictedModalSetup = () => {
    const modal = document.querySelector<HTMLElementTagNameMap["div"]>("div#modal-age-restricted");
    // Not an age-restricted page
    if (!modal) {
      return;
    }
    if (modal !== document.querySelector("body>div#modal-age-restricted")) {
      throw new Error("#modal-age-restricted must be a direct child of the body element!");
    }
    const addAgeVerifiedQueryToLinks = () =>
      document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
        let newHref = new URL(el.href);
        newHref.searchParams.set("ageVerified", "true");
        el.href = newHref.toString();
      });
    if (localStorage.ageVerified === "true") {
      addAgeVerifiedQueryToLinks();
    } else {
      const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
      const onRejectButtonClick = (e: MouseEvent) => {
        e.preventDefault();
        location.href = "about:blank";
      };
      rejectButton.addEventListener("click", onRejectButtonClick);
      const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
      acceptButton.addEventListener(
        "click",
        (e: MouseEvent) => {
          e.preventDefault();
          rejectButton.removeEventListener("click", onRejectButtonClick);
          localStorage.ageVerified = "true";
          document.body.style.overflow = "auto";
          document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
          modal.style.display = "none";
          addAgeVerifiedQueryToLinks();
        },
        { once: true },
      );
      modal
        .querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
        .style.removeProperty("display");
      rejectButton.focus();
    }
  };

  ageRestrictedModalSetup();
</script>
