---
import ProxyTab from "./SettingsContent/ProxyTab.astro";
import CustomizationTab from "./SettingsContent/CustomizationTab.astro";

import { getLangFromUrl, useTranslations } from "../i18n/utils";
import CloakingTab from "./SettingsContent/CloakingTab.astro";
import CreditsTab from "./SettingsContent/CreditsTab.astro";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<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>
<script is:inline>
  window.loadedContentStorage = {};
  window.currentlySelectedTab;
  function settingsLoad() {
    document.addEventListener("astro:before-swap", () => {
      // Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
      window.currentlySelectedTab = "";
      document.removeEventListener("setting-tabChange", determineListener);

    });
    Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
    let contentToLoad = document.getElementById("content-" + tab.id);
    if (contentToLoad) {
      window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
      contentToLoad.remove();
    }

    tab.addEventListener("click", (event) => {
      loadContent(event.target.id);
    });
  });

  function loadContent(tabID) {
    if (window.currentlySelectedTab == tabID) return;
    else window.currentlySelectedTab = tabID;
    let currentContent = document.getElementById("current-content");
    if (currentContent) {
      currentContent.style.opacity = "0";
      setTimeout(() => {
        currentContent.innerHTML = window.loadedContentStorage[tabID];
        currentContent.style.opacity = "1";
        document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
        document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
      }, 250);
    }
  }

  function addDropdownListener() {
    let dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
    Array.from(dropdown_toggles).forEach((toggle) => {
      toggle.onclick = function() {
        toggleEventListener(toggle);
      };
    });
  }

  function toggleEventListener(toggle) {
    let 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 closeDropdown(dropdownID) {
    let dropdown = document.getElementById(dropdownID);
    if (dropdown) {
      dropdown.style.maxHeight = "0px";
      setTimeout(() => {
        let 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.
    let dropdown = document.getElementById(dropdownID);
    let dropdownMenu = document.getElementById(dropdownID + "-menu");

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

  function applySavedLocalStorage(localStorageItem, dropdownID) {
    if (localStorage.getItem(localStorageItem)) {
      let dropdown_toggle = document.getElementById(dropdownID);
      if (dropdown_toggle) {
        dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
      }
    }
  }

  function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
    Array.from(item.children).forEach((item) => {
      item.onclick = () => {
        let localStorageItemContent = {
          name: item.innerText,
          value: item.dataset.setting,
        };
        localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
        applySavedLocalStorage(localStorageItem, dropdownID);
        closeDropdown(item.parentElement.id);
        if (typeof optionalCallback == "function") {
          optionalCallback();
        }
      };
    });
  }

  function applyInputListeners(item, localStorageItem) {
    item.addEventListener("input", () => {
      localStorage.setItem(localStorageItem, item.value);
    });
  }

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

  loadContent("setting-tab-proxy");

  function setupCustomizationSettings() {
    applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
    applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
    let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
    let languageDropdown = document.getElementById("dropdown__selected-language-menu");
    applyDropdownEventListeners(
      themeDropdown,
      "dropdown__selected-theme",
      "alu__selectedTheme",
      changeTheme
    );
    applyDropdownEventListeners(
      languageDropdown,
      "dropdown__selected-language",
      "alu__selectedLanguage",
      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;

        let localStorageItem = {
          name: cloakName,
          icon: cloakIcon,
          isCustom: false,
        };
        localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));

        if (cloakName == "None") {
          localStorage.removeItem("alu__selectedCloak");
          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");
        }
      });
    });

    let customNameInput = document.getElementById("cloak-custom-name-input");
    let customFaviconInput = document.getElementById("cloak-custom-favicon-input");
    if (localStorage.getItem("alu__selectedCloak")) {
      let selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
      if (selectedCloak.isCustom) {
        customNameInput.value = selectedCloak.name;
        customFaviconInput.value = selectedCloak.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;
      let localStorageItem = {
        name: cloakName,
        icon: cloakIcon,
        isCustom: true,
      };
      localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
      if (cloakName == "None") {
        localStorage.removeItem("alu__selectedCloak");
        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() {
    let theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
    if (theme) {
      document.documentElement.setAttribute("data-theme", theme.toLowerCase());
      let footer = document.getElementById("footer");
      if (footer) {
        footer.dataset.theme = theme.toLowerCase();
      }
    }
  }

  function setupSettings(event) {
    if (event.detail == "setting-tab-proxy") {
      applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
      applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
      applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
      let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
      let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
      let openWithDropdown = document.getElementById("dropdown__open-with-menu");
      let bareUrlInput = document.getElementById("bare-url-input");
      let searxngUrlInput = document.getElementById("searxng-url-input");
      let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
      if (savedSearxngUrl != undefined) {
        if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
        searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
      }
      // Proxy settings
      applyInputListeners(bareUrlInput, "alu__bareUrl");
      applyInputListeners(searxngUrlInput, "alu__searxngUrl");
      applyDropdownEventListeners(
        searchEngineDropdown,
        "dropdown__search-engine",
        "alu__search_engine",
        checkSearxng
      );
      applyDropdownEventListeners(
        selectedProxyDropdown,
        "dropdown__selected-proxy",
        "alu__selectedProxy"
      );
      applyDropdownEventListeners(openWithDropdown, "dropdown__open-with", "alu__selectedOpenWith");
      if (localStorage.getItem("bareUrl")) {
        bareUrlInput.value = localStorage.getItem("bareUrl");
      } else {
        bareUrlInput.value = "/bare/";
      }
      checkSearxng();
    } else if (event.detail == "setting-tab-customization") {
      setupCustomizationSettings();
    } else if (event.detail == "setting-tab-cloaking") {
      setupCloakingSettings();
    }
  }

  function checkSearxng() {
    // This function checks if the "searxng" option was clicked, display an additional option if so.
    if (localStorage.getItem("alu__search_engine")) {
      if (JSON.parse(localStorage.getItem("alu__search_engine")).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() {
    let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
    let currentLanguage = window.location.pathname.split("/")[1];
    // Do nothing.. because we're already on the page.
    if (value == currentLanguage) return;
    switch (value) {
      case "en":
        window.location.href = "/en/settings/";
        break;
      case "jp":
        window.location.href = "/jp/settings/";
        break;
    }
  }
  }
  document.addEventListener('astro:after-swap', () => {
    setTimeout(() => {
      settingsLoad();
    }, 300);

  })
  settingsLoad()
</script>
<style is:global>
  .content-hidden {
    display: none;
  }
  #current-content {
    transition: opacity 250ms ease-in-out;
    margin-left: 20px;
  }
  .settings-container {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 2;
  }
  .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;
  }

  .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;
    min-height: 400px;
    max-height: 400px;
    border-radius: 48px;
    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: 25px;
  }
  .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;
  }
  #setting-tab-proxy:checked ~ .marker {
    transform: translateY(0%);
  }
  #setting-tab-customization:checked ~ .marker {
    transform: translateY(13.5%);
  }
  #setting-tab-cloaking:checked ~ .marker {
    transform: translateY(27%);
  }
  #setting-tab-credits:checked ~ .marker {
    transform: translateY(41%);
  }
</style>