---
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")}>
  <div class="main-content">
    <h1 class="title-text">{t("menu.welcome")}</h1>
    <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}
        />
        <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>
        <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>

    <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.whyIsAluSoSlow")}</h2>
        <p>{t("faq.whyIsAluSoSlow.answer")}</p>
      </div>
      <div class="faq-card faq-large">
        <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>
  </div>
  <ProxyRegistrar />
  <script>
    import { TransportMgr, initTransport, loadSelectedTransportScript, loadUltraviolet, loadUltravioletConfig } from "@components/ts/TransportManager";
    document.addEventListener("astro:after-swap", async () => {
      console.log("Updating transport...");
      await loadUltraviolet();
      await loadUltravioletConfig();
      await loadSelectedTransportScript();
      TransportMgr.updateTransport();
    });
    type Suggestion = {
      phrase: string;
    };
    await loadUltraviolet();
    await loadUltravioletConfig();
  
    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 () => {
        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-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto;
    width: 90%;
    margin-top: 40px;
  }

  .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>