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

  let store = useLabelEditorStore();

  const props = defineProps({
    supplier: {type: Object as PropType<Supplier>, required: true},
  });

  let edit: Ref<boolean> = ref<boolean>(false);

  let topm_id: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.topm_id)));
  let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.name)));
  let bio_info: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.supplier.bio_info)));

  function toggleEdit() {
    if (edit.value) {
      disableEdit();
    } else {
      enableEdit();
    }
  }

  function enableEdit() {
    edit.value = true;
  }

  function disableEdit() {
    topm_id.value = JSON.parse(JSON.stringify(props.supplier.topm_id));
    name.value = JSON.parse(JSON.stringify(props.supplier.name));
    bio_info.value = JSON.parse(JSON.stringify(props.supplier.bio_info));
    edit.value = false;
  }

  async function updateSupplier() {
    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(props.supplier.id, topm_id.value, name.value, bio_info.value);
      await store.updateSupplier(supplier);

      disableEdit();
    }
  }

  async function deleteSupplier() {
    await store.deleteSupplier(props.supplier.id);
  }
</script>

<template>
  <v-card>
    <v-card-title>
      <v-row style="padding-top: 10px">

        <v-col>
          <v-text-field
              v-model.trim="topm_id"
              label="TopM ID"
              :readonly="!edit"
          />
          <v-text-field
              v-model.trim="name"
              label="Bezeichnung"
              :readonly="!edit"
          />
          <v-text-field
              v-model.trim="bio_info"
              label="BIO Info"
              :readonly="!edit"
          />
        </v-col>

        <v-spacer />

        <v-divider vertical/>

        <DeleteConfirm
            title="Lieferant löschen?"
            :disable="!edit"
            @delete="deleteSupplier()"
        />

        <v-divider vertical/>

        <v-btn
            :flat="true"
            :disabled="!edit"
            :hidden="edit"
            @click="disableEdit()"
        >
          <v-icon>mdi-cancel</v-icon>
          <v-tooltip
              activator="parent"
              location="bottom"
          >
            Abbrechen
          </v-tooltip>
        </v-btn>

        <v-btn
            :flat="true"
            :disabled="!edit"
            :hidden="edit"
            @click="updateSupplier()"
        >
          <v-icon>mdi-content-save</v-icon>
          <v-tooltip
              activator="parent"
              location="bottom"
          >
            Speichern
          </v-tooltip>
        </v-btn>

        <v-divider vertical/>

        <v-btn
            :flat="true"
            @click="toggleEdit();"
        >
          <v-icon>mdi-pencil</v-icon>
          <v-tooltip
              activator="parent"
              location="bottom"
          >
            Bearbeiten
          </v-tooltip>
        </v-btn>
      </v-row>
    </v-card-title>
  </v-card>
</template>

<style scoped>

</style>