<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import type {Ref} from "vue";
  import {Supplier} from "~/types/supplier";

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

  let topm_id: Ref<string | null> = ref<string | null>(null);
  let name: Ref<string | null> = ref<string | null>(null);
  let bio_info: Ref<string | null> = ref<string | null>(null);

  async function create() {
    if (topm_id.value != null && topm_id.value.trim().length > 0 &&
        name.value != null && name.value.trim().length > 0 &&
        bio_info.value != null && bio_info.value.trim().length > 0) {
      const supplier = new Supplier(0, topm_id.value, name.value, bio_info.value);
      await store.createSupplier(supplier);

      closeDialog();
    }
  }

  function closeDialog() {
    dialog.value = false;
    clearVariables();
  }

  function clearVariables() {
    topm_id.value = null;
    name.value = null;
    bio_info.value = null;

    loading.value = false;
  }

</script>

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

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

        Lieferant erstellen

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

      <v-divider/>

      <v-card-text>
        <v-text-field
            v-model.trim="topm_id"
            label="TopM ID"
            autofocus
        />

        <v-text-field
            v-model.trim="name"
            label="Name"
        />

        <v-text-field
            v-model.trim="bio_info"
            label="BIO Info"
        />
      </v-card-text>

      <v-divider/>

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

        <v-btn
            variant="text"
            :disabled="topm_id == null || name == null || loading"
            @click="create();"
        >
          Erstellen
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>

</style>