---
import Layout from "../../layouts/Layout.astro";

import { STATIC_PATHS, i18n } from "@i18n/utils";
import Link from "@components/UI/Link.astro";
import ProxyRegistrar from "@components/ProxyRegistrar.astro";
import Input from "@components/UI/Input.astro";
const t = i18n.inferLangUseTranslations(Astro.url);

export function getStaticPaths() {
  return STATIC_PATHS;
}
---

<Layout title={t("pages.home")}>
  <main id="main-content">
    <h1 class="title-text">{t("menu.welcome")}</h1>
    <section id="proxy-input">
      <div class="form-wrapper">
        <form class="url-input-form" id="url-input-form">
          <Input
            className="url-input"
            inputName="url"
            height="50px"
            placeholder={t("menu.search")}
            defaultStyles={false}
            transition:persist
          />
          <div id="search-suggestions"></div>
          <div id="loading-content">Loading...</div>
        </form>
        <div id="top-bar">
          <div class="top-bar-left">
            <button id="close-button">Close</button>
            <div class="nav-container">
              <img id="nav-backwards" src="/img/nav/backwards.svg" alt="Backwards Arrow" />
              <img id="nav-forwards" src="/img/nav/forwards.svg" alt="Forwards Arrow" />
              <img id="nav-share" src="/img/nav/share.svg" alt="Share Page" />
            </div>
          </div>
          <div class="top-bar-right">
            <img id="proxied-favicon" alt="favicon" />
            <span id="url-text"></span>
          </div>
        </div>
        <iframe title="proxy-iframe" id="proxy-frame"></iframe>
      </div>
    </section>
    <section id="faq">
      <h2 class="faq-title">{t("faq.title")}</h2>
      <div class="faq-section">
        <div class="faq-card">
          <h2>{t("faq.whatIsAProxy")}</h2>
          <p>{t("faq.whatIsAProxy.answer")}</p>
        </div>
        <div class="faq-card">
          <h2>{t("faq.contributeToAlu")}</h2>
          <p>
            {t("faq.contributeToAlu.answer.segment1")}
            <Link
              href="https://www.patreon.com/wearr"
              newTab
              content={t("faq.contributeToAlu.answer.patreonLinkText")}
            />
            {t("faq.contributeToAlu.answer.segment2")}
          </p>
        </div>
        <div class="faq-card faq-large">
          <h2>{t("faq.noBareClients")}</h2>
          <p>{t("faq.noBareClients.answer")}</p>
        </div>
      </div>
    </section>
  </main>
  <ProxyRegistrar />
  <script>
    import { initTransport, registerSW } from "@components/ts/TransportManager";
    type Suggestion = {
      phrase: string;
    };
    await registerSW();

    async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
      if (!urlInput) throw new Error("urlInput is null");
      if (!searchSuggestions) throw new Error("searchSuggestions is null");
      let url = urlInput.value;
      let request = await fetch("/search?query=" + url);
      let data = await request.json();
      searchSuggestions.innerHTML = "";
      data.map((suggestion: Suggestion) => {
        let suggestionElement = document.createElement("div");
        // For some reason css classes weren't working T^T.
        suggestionElement.style.cursor = "pointer";
        suggestionElement.style.marginTop = "5px";
        suggestionElement.innerText = suggestion.phrase;
        suggestionElement.addEventListener("click", async () => {
          urlInput.value = suggestion.phrase;
          // I can't be bothered to extend the window object, so I'm just going to use any
          (window as any).loadFormContent();
        });
        searchSuggestions.appendChild(suggestionElement);
      });
      if (data.length === 0) {
        urlInput.classList.remove("search-results");
        searchSuggestions.style.opacity = "0";
      } else {
        urlInput.classList.add("search-results");
        searchSuggestions.style.opacity = "1";
      }
    }

    function addEventListeners() {
      let urlInput = document.getElementById("url-input") as HTMLInputElement;
      let searchSuggestions = document.getElementById("search-suggestions") as HTMLDivElement;
      // Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
      if (!urlInput || !searchSuggestions) return;
      urlInput.addEventListener("focus", () => {
        if (!searchSuggestions) {
          throw new Error("searchSuggestions is null");
        }
        if (searchSuggestions.children.length > 0) {
          searchSuggestions.style.opacity = "1";
          searchSuggestions.style.pointerEvents = "all";
          urlInput.classList.add("search-results");
        }
      });
      urlInput.addEventListener("blur", () => {
        searchSuggestions.style.opacity = "0";
        setTimeout(() => {
          searchSuggestions.style.pointerEvents = "none";
        }, 200);
        urlInput.classList.remove("search-results");
      });

      urlInput.addEventListener("keyup", async () => {
        if (urlInput.value.length >= 3) {
          return await sendAPIRequest(urlInput, searchSuggestions);
        }
      });
    }
    document.addEventListener("astro:after-swap", addEventListeners);
    document.addEventListener("DOMContentLoaded", initTransport);
    addEventListeners();
  </script>
</Layout>

<style is:global>
  #main-content {
    width: 100%;
    margin-top: 50px;
  }

  .form-wrapper {
    display: flex;
    justify-content: center;
  }
  form {
    width: 350px;
    height: 56px;
  }

  .title-text {
    font-size: 38px;
  }

  .url-input-form {
    border: none;
    padding: 0;
  }

  .url-input {
    display: block;
    background: transparent url("/img/search.svg") no-repeat 13px center;
    background-color: var(--dropdown-background-color);
    color: var(--text-color);
    border: 3px solid var(--text-color);
    border-radius: 30px;
    padding: 15px;
    width: 100%;
    text-align: center;
    transition: 250ms ease-in-out;
    outline: none;
    font-family: "Varela Round", sans-serif;
    font-size: 16px;
  }

  .url-input.search-results {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  .url-input::placeholder {
    color: var(--text-color);
  }

  #search-suggestions {
    background-color: var(--accent-color-brighter);
    z-index: 3;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-color);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: 250ms ease-in-out;
    opacity: 0;
    height: 240px;
    overflow: hidden;
    border: 3px solid var(--text-color);
    box-shadow: 10px 10px 20px var(--dropdown-background-color);
  }

  #loading-content {
    color: var(--text-color);
    padding: 8px;
    position: relative;
    /* hack */
    top: -325px;
    opacity: 0;
    transition: 250ms ease-in-out;
    text-align: center;
  }

  .faq-title {
    color: var(--text-color);
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
  }

  .faq-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px auto 0;
    width: 90%;
  }

  .faq-card {
    background-color: var(--dropdown-background-color);
    border-radius: 10px;
    padding: 20px;
    color: var(--text-color);
  }
  @media (max-width: 768px) {
    .faq-card {
      grid-column: span 2;
    }
  }
  .faq-large {
    grid-column: span 2;
  }
</style>