<script lang="ts">
import { defineComponent, SetupContext, ref, Ref } from 'vue';
import GetLocalizedText from "../classes/language";

export default defineComponent({
    name: 'settings',
    setup(_, { emit }: SetupContext) {
        var attributeTheme: Ref<string> = ref(document.documentElement.getAttribute("data-theme") ?? "dark")
        var attributeLang: Ref<string> = ref(document.documentElement.getAttribute("data-language") ?? "english")

        // localized text
        var settingsThemeLocalized: Ref<string> = ref("");
        var settingsLangLocalized: Ref<string> = ref("");
        async function getLocalization() {
            settingsThemeLocalized.value = await GetLocalizedText("theme")
            settingsLangLocalized.value = await GetLocalizedText("lang")
        }

        // TODO: if time rework this to function with the new intended settings class
        // NOTE: this has low priority as the system inplace although not very intuitive works
        const changeTheme = (theme: string) => {

            document.documentElement.setAttribute('data-theme', theme);
            if (localStorage.getItem("allow-data-storage") == "true") {
                localStorage.setItem("theme", theme)
            }

        }

        const changeLang = (lang: string) => {
            document.documentElement.setAttribute('data-language', lang);
            if (localStorage.getItem("allow-data-storage") == "true") {
                localStorage.setItem("lang", lang)
            }
        }

        getLocalization()
        const close = () => {
            emit("close");
        };

        return {
            close,
            changeTheme,
            changeLang,
            settingsThemeLocalized,
            settingsLangLocalized,
            attributeTheme,
            attributeLang
        };
    },
});
</script>


<template>
        <div class="card-body">

            <h2 class="card-title">User Settings</h2>
            <label class="input input-bordered flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="h-4 w-4 opacity-70">
                    <path
                        d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
                    <path
                        d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
                </svg>
                <input type="text" class="grow" placeholder="Email" />
            </label>
            <label class="input input-bordered flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                    class="h-4 w-4 opacity-70">
                    <path fill-rule="evenodd"
                        d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
                        clip-rule="evenodd" />
                </svg>
                <input type="password" class="grow" value="password" />
            </label>

            <div class="divider"></div>

            <h2 class="card-title">Plattform Settings</h2>
            <div class="w-full">
                {{ settingsLangLocalized }}:
                <div class="dropdown dropdown-bottom">
                    <div tabindex="0" role="button" class="btn m-1"> {{ attributeLang }}</div>
                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-fill p-2 shadow">
                        <li @click="changeLang('ger')"><a>Deutsch</a></li>
                        <li @click="changeLang('en')"><a>English</a></li>
                    </ul>
                </div>
            </div>

            <div class="w-full">
                {{ settingsThemeLocalized }}:
                <div class="dropdown dropdown-bottom">
                    <div tabindex="0" role="button" class="btn m-1"> {{ attributeTheme }}</div>
                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-fill p-2 shadow">
                        <li @click="changeTheme('dark')"><a>Dark</a></li>
                        <li @click="changeTheme('light')"><a>Light</a></li>
                    </ul>
                </div>
            </div>
        </div>
</template>

<style scoped>
.settingsBody {
    position: absolute;
    margin: 10% 10% 0 10%;
    width: 80%;
    z-index: 10;
}

.btn.close {
    position: absolute;
    right: 30px;
    top: 30px;
    margin: 0;
}
</style>