<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import type {Article} from "~/types/article";

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

  let loading: Ref<boolean> = ref<boolean>(false);
  let articles: Ref<Article[]> = ref<Article[]>([]);
  let selectedArticle: Ref<Article | null> = ref<Article | null>(null);

  watch(dialog, async (oldDialog) => {
    if (oldDialog) {
      console.log("Get articles");
      articles.value = await loadArticles();
      console.log("Got articles");
    }
  })

  async function loadArticles(): Promise<Array<Article>> {
    try {
      const articles: Array<Article> = await $fetch<Array<Article>>(config.public.url + '/articles', {
        method: 'GET',
      });

      return articles;
    } catch {
      return [];
    }
  }

  async function getSelected() {
    if (selectedArticle.value != null) {
      loading.value = true;
      const articleID: number = selectedArticle.value.id;

      await store.loadArticle(articleID);

      loading.value = false;
      dialog.value = false;
    }
  }

  function closeDialog() {
    clearVariables();

    dialog.value = false;
  }

  function clearVariables() {
    selectedArticle.value = null;
    loading.value = false;
  }
</script>

<template>
  <v-dialog
      v-model="dialog"
      :scrollable="true"
      width="800"
      max-height="500"
  >
    <template v-slot:activator="{ props }">
      <v-btn
          :flat="true"
          v-bind="props"
      >
        <v-icon>mdi-magnify</v-icon>
        <v-tooltip
            activator="parent"
            location="bottom"
        >
          Artikel auswählen
        </v-tooltip>
      </v-btn>
    </template>

    <v-card>
      <v-card-title>
        <v-icon size="small">
          mdi-magnify
        </v-icon>

        Artikel auswählen

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

      <v-divider/>

      <v-card-text>
        <v-autocomplete
            v-model="selectedArticle"
            :items="articles"
            label="Artikel"
            item-title="name"
            :disabled="loading"
            :clearable="true"
            :autofocus="true"
            :return-object="true"
            :auto-select-first="true"
            :open-on-clear="true"
            no-data-text="Keine Artikel angelegt"
            @keyup.enter="getSelected()"
        ></v-autocomplete>
      </v-card-text>

      <v-divider/>

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

        <v-btn
            variant="text"
            :disabled="loading"
            @click="closeDialog()"
        >
          Abbrechen
        </v-btn>

        <v-btn
            variant="text"
            :disabled="selectedArticle == null || loading"
            @click="getSelected();"
        >
          Auswählen
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

</template>

<style scoped>

</style>