<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import type {Ref} from "vue";
  import LabelCreate from "~/components/label/labelCreate.vue";
  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
  import {Label} from "~/types/label";
  import {Settings} from "~/types/settings";

  let store = useLabelEditorStore();
  let dialog: Ref<boolean> = ref<boolean>(false);
  let loading: Ref<boolean> = ref<boolean>(false);

  watch(dialog, async (oldDialog) => {
    if (oldDialog) {
      loading.value = true;

      await store.loadSettings();

      loading.value = false;
    }
  })

  async function updateSettings(name: string, value: string) {
    if (store.settings != null) {
      switch (name) {
        case "MHD":
          console.log("Update MHD: " + value);
          const settingsMhd = new Settings(store.settings.id, value, store.settings.bio);
          await store.updateSettings(settingsMhd);

          break;
        case "BIO":
          console.log("Update BIO: " + value);
          const settingsBio = new Settings(store.settings.id, store.settings.mhd, value);
          await store.updateSettings(settingsBio);

          break;
        default:
          console.log("Error: Unbekannter Wert für Einstellungen");
      }
    }
  }

  function closeDialog() {
    dialog.value = false;
  }
</script>

<template>
  <v-dialog
      v-model="dialog"
      :scrollable="true"
      width="800"
      max-height="750"
      height="750"
  >
    <template v-slot:activator="{ props }">
      <v-btn
          :flat="true"
          v-bind="props"
          size="small"
      >
        <v-icon>mdi-archive</v-icon>
        <v-tooltip
            activator="parent"
            location="bottom"
        >
          Einstellungen
        </v-tooltip>
      </v-btn>
    </template>

    <v-card>
      <v-card-title>
        <v-row style="padding-top: 10px">
          <v-icon size="small">
            mdi-archive
          </v-icon>

          Einstellungen

          <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>

          <v-spacer/>
          <v-divider vertical/>

          <LabelCreate/>
        </v-row>
      </v-card-title>

      <v-divider/>

      <v-card-text v-if="store.settings != null">
        <SettingsRow
            key="mhd"
            name="MHD"
            v-bind:value="store.settings.mhd"
            @update="updateSettings"
        />

        <SettingsRow
            key="bio"
            name="BIO"
            v-bind:value="store.settings.bio"
            @update="updateSettings"
        />
      </v-card-text>

      <v-card-text v-else>
        Fehler beim laden der Einstellungen
      </v-card-text>

      <v-divider/>

      <v-card-actions>
        <v-spacer/>

        <v-btn
            variant="text"
            :disabled="loading"
            @click="closeDialog()"
        >
          Schließen
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>

</style>