---
import ProxyTab from "@components/SettingsContent/ProxyTab.astro";
import CustomizationTab from "@components/SettingsContent/CustomizationTab.astro";
import CloakingTab from "@components/SettingsContent/CloakingTab.astro";
import CreditsTab from "@components/SettingsContent/CreditsTab.astro";
import Layout from "src/layouts/Layout.astro";

import { STATIC_PATHS, i18n } from "@i18n/utils";
const lang = i18n.getLangFromUrl(Astro.url);
const t = i18n.useTranslations(lang);

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

<Layout title={t("pages.settings")}>
  <main id="main-content">
    <h1 class="title-text">{t("settings.title")}</h1>
    <div class="content-hidden">
      <div id="content-setting-tab-proxy">
        <h1 class="content-setting-header">{t("settings.proxy")}</h1>
        <ProxyTab />
      </div>
      <div id="content-setting-tab-customization">
        <h1 class="content-setting-header">{t("settings.customization")}</h1>
        <CustomizationTab />
      </div>
      <div id="content-setting-tab-cloaking">
        <h1 class="content-setting-header">{t("settings.cloaking")}</h1>
        <p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
        <CloakingTab />
      </div>
      <div id="content-setting-tab-credits">
        <h1 class="content-setting-header">{t("settings.credits")}</h1>
        <CreditsTab />
      </div>
    </div>

    <div class="popup">
      <div class="tabs">
        <input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
        <label for="setting-tab-proxy">Proxy</label>
        <input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
        <label for="setting-tab-customization">Customization</label>
        <input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
        <label for="setting-tab-cloaking">Cloaking</label>
        <input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
        <label for="setting-tab-credits">Credits</label>
        <div class="marker">
          <div id="top"></div>
          <div id="bottom"></div>
        </div>
      </div>
      <div id="current-content"></div>
    </div>
  </main>
  <script is:inline>
    Alu.settings.contentStore = {};
    Alu.settings.currentPage;
    function settingsLoad() {
      document.addEventListener("astro:before-swap", () => {
        Alu.settings.currentPage = "";
      });
      Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
        const contentToLoad = document.getElementById("content-" + tab.id);
        if (contentToLoad) {
          Alu.settings.contentStore[tab.id] = contentToLoad.innerHTML;
          contentToLoad.remove();
        }

        tab.addEventListener("click", (event) => {
          loadContent(event.target.id);
        });
      });
    }
    function loadContent(tabID) {
      let curTabID = Alu.settings.currentPage
      if (curTabID == tabID) return;
      else curTabID = tabID;
      const currentContent = document.getElementById("current-content");
      if (currentContent) {
        currentContent.style.opacity = "0";
        setTimeout(() => {
          currentContent.innerHTML = Alu.settings.contentStore[tabID];
          currentContent.style.opacity = "1";
          document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
        }, 250);
      }
    }

    function addDropdownListener() {
      const dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
      Array.from(dropdown_toggles).forEach((toggle) => {
        toggle.onclick = function () {
          closeOtherDropdowns(toggle.id);
          toggleDropdown(toggle);
        };
      });
    }

    function toggleDropdown(toggle) {
      const dropdown = document.getElementById(toggle.id + "-menu");
      if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") {
        dropdown.style.maxHeight = dropdown.scrollHeight + "px";
        toggle.style.borderRadius = "10px 10px 0 0";
      } else {
        dropdown.style.maxHeight = "0px";
        setTimeout(() => {
          toggle.style.borderRadius = "10px";
        }, 300);
      }
    }

    function determineListener(event) {
      if (event.detail == "setting-tab-proxy") {
        addDropdownListener();
      } else if (event.detail == "setting-tab-customization") {
        addDropdownListener();
      }
    }

    function closeOtherDropdowns(dropdownIDToExclude) {
      const dropdowns = document.getElementsByClassName("dropdown-menu");
      Array.from(dropdowns).forEach((dropdown) => {
        dropdown.style.maxHeight = "0px";
        setTimeout(() => {
          if (dropdown.id != dropdownIDToExclude + "-menu") {
            const dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", ""));
            dropdown_toggle.style.borderRadius = "10px";
          }
        }, 300);
      });
    }

    function closeDropdown(dropdownID) {
      const dropdown = document.getElementById(dropdownID);
      if (dropdown) {
        dropdown.style.maxHeight = "0px";
        setTimeout(() => {
          const dropdown_toggle = document.getElementById(dropdownID.replace("-menu", ""));
          dropdown_toggle.style.borderRadius = "10px";
        }, 300);
      }
    }

    function getLocalStorageValue(localStorageItem, dropdownID) {
      // I was kinda dumb for not doing this earlier.
      const dropdown = document.getElementById(dropdownID);
      const dropdownMenu = document.getElementById(dropdownID + "-menu");

      if (dropdown && dropdownMenu) {
        // Now we find the child that matches localStorageItem.value.
        const dropdownItem = Array.from(dropdownMenu.children).find((item) => {
          return Alu.store.get(localStorageItem).value == item.dataset.setting;
        });
        // Now set the inner text to the name in the dropdownItem.
        return dropdownItem.innerText;
      }
    }

    function applySavedLocalStorage(localStorageItem, dropdownID) {
      if (Alu.store.get(localStorageItem)) {
        const dropdown_toggle = document.getElementById(dropdownID);
        if (dropdown_toggle) {
          dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
        }
      }
    }

    function applyDropdownEventListeners(dropdown, optionalCallback) {
      const dropdownSibling = document.getElementById(dropdown.id + "-menu");
      const localStorageItem = dropdown.dataset.localStorageKey;
      Array.from(dropdownSibling.children).forEach((child) => {
        child.onclick = () => {
          const localStorageItemContent = {
            name: child.innerText,
            value: child.dataset.setting,
          };
          Alu.store.set(localStorageItem, localStorageItemContent);
          applySavedLocalStorage(localStorageItem, dropdown.id);
          closeDropdown(dropdownSibling.id);

          if (typeof optionalCallback == "function") {
            optionalCallback();
          }
        };
      });
    }

    function applyInputListeners(item, localStorageItem) {
      item.addEventListener("input", () => {
        Alu.store.set(localStorageItem, { value: item.value });
      });
    }

    function addThemeToDropdown(extension) {
      const dropdown = document.getElementById("dropdown__selected-theme-menu");
      if (dropdown) {
        // TODO: Figure out why addThemeToDropdown is being called 6 times
        // This when you go from another page and back to settings->customization.
        const duplicateItem = Array.from(dropdown.children).find((item) => {
          return item.dataset.setting == extension.themeName;
        });
        if (duplicateItem) return;
        const themeItem = document.createElement("li");
        themeItem.classList.add("dropdown-item");
        themeItem.dataset.setting = extension.themeName;
        themeItem.textContent = extension.title;
        dropdown.appendChild(themeItem);
      }
    }

    document.addEventListener("setting-tabLoad", determineListener);

    loadContent("setting-tab-proxy");

    function setupCustomizationSettings() {
      const store = window.idb.transaction("InstalledExtensions", "readonly").objectStore("InstalledExtensions");
      store.getAll().onsuccess = (event) => {
        const result = event.target.result;
        if (result) {
          result.forEach((extension) => {
            if (extension.type === "theme" && extension.themeName) {
              // Create a dropdown item for the theme
              addThemeToDropdown(extension);
            }
          });
        }
        applySavedLocalStorage("theme", "dropdown__selected-theme");
        applySavedLocalStorage("lang", "dropdown__selected-language");

        const themeDropdown = document.getElementById("dropdown__selected-theme");
        const languageDropdown = document.getElementById("dropdown__selected-language");
        applyDropdownEventListeners(themeDropdown, changeTheme);
        applyDropdownEventListeners(languageDropdown, navigateToNewLangaugePage);
      };
    }

    function setupCloakingSettings() {
      Array.from(document.getElementById("cloak-list").children).forEach((cloak) => {
        cloak.addEventListener("click", () => {
          let cloakName = cloak.dataset.cloakName;
          let cloakIcon = cloak.dataset.cloakIcon;

          const cloakItem = {
            name: cloakName,
            icon: cloakIcon,
            isCustom: false,
          };
          Alu.store.set("cloak", cloakItem);

          if (cloakName == "None") {
            Alu.store.remove("cloak");
            cloakName = "Settings | Alu";
            cloakIcon = "/favicon.svg";
          }
          let link = document.querySelector("link[rel~='icon']");
          if (!link) {
            link = document.createElement("link");
            link.rel = "icon";
            document.head.appendChild(link);
          }
          link.href = cloakIcon;
          document.title = cloakName;

          if (!cloak.classList.contains("selected")) {
            Array.from(document.getElementById("cloak-list").children).forEach((cloak2) => {
              cloak2.classList.remove("selected");
            });
            cloak.classList.add("selected");
          }
        });
      });

      const customNameInput = document.getElementById("cloak-custom-name-input");
      const customFaviconInput = document.getElementById("cloak-custom-favicon-input");
      const cloak = Alu.store.get("cloak");
      if (cloak) {
        if (cloak.isCustom) {
          customNameInput.value = cloak.name;
          customFaviconInput.value = cloak.icon;
        }
      }

      document.getElementById("cloak-custom-button").addEventListener("click", () => {
        let cloakName = document.getElementById("cloak-custom-name-input").value;
        let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
        const cloakItem = {
          name: cloakName,
          icon: cloakIcon,
          isCustom: true,
        };
        Alu.store.set("cloak", cloakItem);
        if (cloakName == "None") {
          Alu.store.remove("cloak");
          cloakName = "Settings | Alu";
          cloakIcon = "/favicon.svg";
        }
        let link = document.querySelector("link[rel~='icon']");
        if (!link) {
          link = document.createElement("link");
          link.rel = "icon";
          document.head.appendChild(link);
        }
        link.href = cloakIcon;
        document.title = cloakName;
      });
    }

    function changeTheme() {
      const theme = Alu.store.get("theme").value;
      document.documentElement.setAttribute("data-theme", theme);
    }

    function setupSettings(event) {
      if (event.detail == "setting-tab-proxy") {
        applySavedLocalStorage("proxy", "dropdown__selected-proxy");
        applySavedLocalStorage("search", "dropdown__search-engine");
        applySavedLocalStorage("openpage", "dropdown__open-with");
        applySavedLocalStorage("wisp", "dropdown__wisp-url");
        applySavedLocalStorage("transport", "dropdown__transport");
        // Dropdowns
        const selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
        const searchEngineDropdown = document.getElementById("dropdown__search-engine");
        const openWithDropdown = document.getElementById("dropdown__open-with");
        const currentTransportDropdown = document.getElementById("dropdown__transport");
        const wispURLDropdown = document.getElementById("dropdown__wisp-url");

        // Inputs
        const searxngUrlInput = document.getElementById("searxng-url-input");
        const bareURLInput = document.getElementById("bare-url-input");

        bareURLInput.value = Alu.store.get("bareUrl").value;
        // Proxy settings
        [selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
          applyDropdownEventListeners(dropdown);
        });
        applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
        checkSearxng();

        applyInputListeners(searxngUrlInput, "searxng");
        applyInputListeners(bareURLInput, "bareUrl");
      } else if (event.detail == "setting-tab-customization") {
        setupCustomizationSettings();
      } else if (event.detail == "setting-tab-cloaking") {
        setupCloakingSettings();
      }
    }

    function checkSearxng() {
      // Callback for search engine dropdown
      const searchEngine = Alu.store.get("search");
      if (searchEngine.value.toLowerCase() == "searx") {
        document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
      } else {
        document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
      }
    }

    document.addEventListener("setting-tabLoad", setupSettings);

    function navigateToNewLangaugePage() {
      const value = Alu.store.get("lang").value;
      const currentLanguage = window.location.pathname.split("/")[1];
      if (value == currentLanguage) return;
      window.location.href = `/${value}/settings`;
    }
    document.addEventListener("astro:after-swap", () => {
      setTimeout(() => {
        settingsLoad();
      }, 200);
    });
    settingsLoad();
  </script>
  <style is:global>
    .content-hidden {
      display: none;
    }
    #current-content {
      transition: opacity 250ms ease-in-out;
      margin-left: 20px;
      height: 700px;
    }
    .settings-container {
      display: flex;
      gap: 20px;
      position: relative;
      z-index: 2;
      flex-wrap: wrap;
      row-gap: 5px;
    }

    .content-setting-header {
      color: var(--text-color);
      font-weight: 400;
    }
    .content-setting-subtext {
      font-size: 20px;
      color: var(--text-color-accent);
    }

    .setting-label {
      color: var(--text-color);
      font-size: 18px;
      font-weight: 400;
      /* annoying stuff with label elements. */
      display: block;
      opacity: 1;
      margin-block: 1em;
      margin-inline: 0;
      user-select: none;
      width: 100%;
      cursor: auto;
      margin-bottom: 5px;
    }

    .setting__searxng-url {
      margin-top: 10px;
      opacity: 0;
      transition: opacity 250ms ease-in-out;
    }
    label {
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
      color: #d8d8d8;
      opacity: 0.6;
      transition: opacity 0.4s ease-in-out;
      display: block;
      width: calc(100% - 48px);
      text-align: right;
      z-index: 100;
      user-select: none;
      text-align: start;
      margin-left: 20px;
    }
    input[type="radio"] {
      display: none;
      width: 0;
    }
    label:hover,
    input[type="radio"]:checked + label {
      opacity: 1;
    }
    .popup {
      width: 98%;
      height: 80%;
      margin: 0 auto;
      max-height: 500px;
      border-radius: 15px;
      box-sizing: border-box;
      background-color: var(--background-color);
      overflow: hidden;
      display: flex;
      align-self: center;
    }
    .tabs {
      width: 100%;
      max-width: 240px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;
      gap: 40px;
    }
    @media (max-width: 1116px) {
      .popup {
        flex-direction: column;
        min-height: 80%;
        max-height: 80%;
      }
      .tabs {
        flex-direction: row;
        max-width: 100%;
        max-height: 70px;
        min-height: 70px;
        gap: 0;
        align-items: center;
      }
      label {
        width: auto;
        margin-left: 0;
      }
    }
    @media (max-width: 500px) {
      label {
        font-size: 20px;
      }
    }
    @media (max-width: 375px) {
      label {
        font-size: 18px;
      }
    }
    .setting {
      width: 140px;
    }
    .marker {
      position: absolute;
      width: 100%;
      height: 200%;
      display: flex;
      flex-direction: column;
      top: calc(-100%);
      left: 0;
      transition: transform 0.2s ease-in-out;
      background-color: var(--accent-color);
    }
    .marker #bottom,
    .marker #top {
      background-color: var(--background-highlight);
    }
    .marker #top {
      height: calc(50%);
      margin-bottom: auto;
      border-radius: 0 0 32px 0;
    }
    .marker #bottom {
      height: calc(50% - 72px);
      border-radius: 0 32px 0 0;
    }
    @media (min-width: 1116px) {
      #setting-tab-proxy:checked ~ .marker {
        transform: translateY(0%);
      }
      #setting-tab-customization:checked ~ .marker {
        transform: translateY(14%);
      }
      #setting-tab-cloaking:checked ~ .marker {
        transform: translateY(28%);
      }
      #setting-tab-credits:checked ~ .marker {
        transform: translateY(42.5%);
      }
    }
  </style>
</Layout>