---
import SettingsCard from "@components/settings/SettingsCard.astro";
import Toast from "@components/toasts/Toast.svelte";
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
import Layout from "@layouts/Layout.astro";
import SettingsLayout from "@layouts/SettingsLayout.astro";
import SettingsSection from "@layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
  const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
  return STATIC_PATHS;
}
export const prerender = true;
---

<Layout title="Settings">
  <SettingsLayout title={t("settings.tab")}>
    <SettingsSection title="Tab" subtitle="Customize and cloak your tab.">
        <div class="w-full h-full flex flex-col items-center justify-center md:flex-row md:items-start md:justify-start gap-4">
            <SettingsCard 
                title="Cloaking" 
                description="Choose how your tab looks" 
                input={{input: false}} 
                button={{name: "Cloak!", id: "cloak"}} 
                select={{ select: true, name: 'cloakselect', options: [
                    {name: 'Default', value: 'reset', disabled: false},
                    {name: 'Google', value: 'google', disabled: false },
                    {name: 'Wikipedia', value: 'wikipedia', disabled: false},
                    {name: 'Canvas', value: 'canvas', disabled: false},
                    {name: 'Google Classroom', value: 'classroom', disabled: false},
                    {name: 'Powerschool', value: 'powerschool', disabled: false}
                    ] }}
            />
            <SettingsCard
                title="A:B & Blob" 
                description="Choose to open your tab in about:blank or blob" 
                input={{input: false}} 
                button={{name: "Go!", id: "aboutblankbutton"}} 
                select={{ select: true, name: 'aboutblank', options: [
                    {name: 'About:Blank', value: 'a:b', disabled: false}, 
                    {name: 'Blob', value: 'blob', disabled: false}
                    ] }}
            />
        </div>
    </SettingsSection>
  </SettingsLayout>
  { /* The toast notifications :D */ }
  <ToastWrapper client:load>
    <Toast toastProp={{toastType: "success", text: "Successfully set cloak!", class: "cloakMessageSuccess"}} client:load />
    <Toast toastProp={{toastType: "success", text: "Saved your option for next time! \n Opening in new tab...", class: "abCloakMessage"}} client:load />
  </ToastWrapper>
</Layout>

<script>
    import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
    import { tabSettings, Settings as SettingsEnum } from "@utils/settings.ts";
    function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
        const cloakLocal = localStorage.getItem(SettingsEnum.TabSettings.tabCloak);
        const abCloakLocal = localStorage.getItem(SettingsEnum.TabSettings.abblob);
        cloakLocal === "default" ? cloakValue.value = "reset" : cloakValue.value = cloakLocal as string;
        abValue.value = abCloakLocal as string || 'a:b';
    }
    document.addEventListener("astro:page-load", function() {
        try {
            const cloakButton = document.getElementById("cloak") as HTMLButtonElement;
            const cloakValue = document.getElementById("cloakselect") as HTMLSelectElement;
            const abButton = document.getElementById("aboutblankbutton") as HTMLButtonElement;
            const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
            setup(cloakValue, abValue);
            cloakButton.addEventListener("click", () => {
                tabSettings.cloakTab(cloakValue.value);
                toast('.cloakMessageSuccess');
            });
            abButton.addEventListener("click", () => {
                toast('.abCloakMessage');
                tabSettings.abCloak(abValue.value);
            });
        }
        catch (_) { /* We don't want to return anything on purpose */ }
    })
</script>