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

export default defineComponent({
  emits: ['close'],
  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 allthough 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 bg-base-100 w-full shadow-xl" style="">
    <div class="card-body">

      <h2 class="card-title">Settings</h2>

      <button class="btn btn-error close round" @click="close()">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
        </svg>
      </button>

      <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>

  </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>