---
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 origin = Astro.url.origin;
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="Miscellaneous">
  <SettingsSection title="Misc" subtitle="All of our miscellaneous settings">
    <div class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4">
        <SettingsCard 
            title="Language"
            description="Choose your language"
            input={{input:false}}
            button={{name: 'Change Language', id: 'setlang'}}
            select={{
                select: true,
                name: 'lang',
                options: [
                    {name: 'English', value: 'en_US', disabled: false},
                    {name: 'Japanese', value: 'jp', disabled: false},
                ]
            }}
            both={{enabled: false}}
        />
        <SettingsCard
            title="Proxy Catalog"
            description="Whether or not to proxy the Catalog"
            input={{input: false}}
            button={{name: 'Set', id: 'setmp' }}
            select={{
                select: true,
                name: 'mp',
                options: [
                    {name: 'False', value: 'false', disabled: false},
                    {name: 'True', value: 'true', disabled: false}
                ]
                }}
                both={{enabled: false}}
            />
        <SettingsCard
            title="Catalog URL"
            description="Change which marketplace your using"
            input={{
                input: true,
                required: true,
                placeholder: `${origin}/api/catalog-assets`
            }}
            button={{name: 'Change', id: 'setcataloghostname' }}
            select={{select: false}}
            both={{enabled: false}}
        />
    </SettingsSection>
  </SettingsLayout>
  <ToastWrapper client:load>
    <Toast toastProp={{
            toastType: 'success',
            text: 'Catalog is now proxied',
            class: 'mpMessage'
        }}
    client:load />
    <Toast toastProp={{
        toastType: 'success',
        text: 'Catalog URL set!',
        class: 'cataloghostnameSuccess'
        }}
    client:load />
    <Toast toastProp={{
        toastType: 'error',
        text: "Catalog doesn't exist!",
        class: 'cataloghosnameError'
      }}
    client:load/>
  </ToastWrapper>
<script>
    import { toast } from "@utils/toast.ts";
    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
    import { pageLoad } from "@utils/events";
    import { navigate } from "astro:transitions/client";
    function setup() {
        const lang = JSON.parse(localStorage.getItem('selectedLanguage') as string) || JSON.parse('{"value": "en_US"}');
        const languageVal = document.getElementById('lang') as HTMLSelectElement;
        languageVal!.value = lang.value;
    }
    pageLoad(() => {
        setup();
        const languageChange = document.getElementById('setlang') as HTMLButtonElement;
        const languageVal = document.getElementById('lang') as HTMLSelectElement;
        languageChange?.addEventListener('click', () => {
            const language = {value: languageVal.value}
            localStorage.setItem("selectedLanguage", JSON.stringify(language));
            navigate(`${window.location.origin}/${languageVal.value}/settings/misc`)
        });
    })
</script>