<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";
  import type {Ref} from "vue";
  import {Variant} from "~/types/variant";
  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
  import type {Unit} from "~/types/unit";
  import type {Label} from "~/types/label";

  let store = useLabelEditorStore();

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

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

  let weight: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.weight)));
  let ean: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ean)));
  let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.name)));
  let unit: Ref<Unit | null> = ref<Unit | null>(JSON.parse(JSON.stringify(props.variant.unit)));
  let description: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.description)));
  let ingredients: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ingredients)));
  let label: Ref<Label | null> = ref<Label | null>(JSON.parse(JSON.stringify(props.variant.label)));
  let variant_description: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.variant_description)));
  let topm_row: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.topm_row)));

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

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

  function disableEdit() {
    edit.value = false;
    weight.value = JSON.parse(JSON.stringify(props.variant.weight));
    ean.value = JSON.parse(JSON.stringify(props.variant.ean));
    name.value = JSON.parse(JSON.stringify(props.variant.name));
    unit.value = JSON.parse(JSON.stringify(props.variant.unit));
    description.value = JSON.parse(JSON.stringify(props.variant.description));
    ingredients.value = JSON.parse(JSON.stringify(props.variant.ingredients));
    topm_row.value = JSON.parse(JSON.stringify(props.variant.topm_row));
  }

  async function updateVariant() {
    if (weight.value != null && unit.value != null) {
      let updateVariant: Variant = new Variant(props.variant.id, weight.value,
          ean.value, name.value, description.value, ingredients.value,
          unit.value, label.value, variant_description.value, topm_row.value);

      await store.updateVariant(updateVariant);

      disableEdit();
    }
  }

  async function deleteVariant() {
    await store.deleteVariant(props.variant.id);
  }

</script>

<template>
  <v-card>
    <v-card-title>
      <v-row style="padding-top: 10px">
        <v-text-field
            v-model.trim="variant_description"
            :readonly="!edit"
            label="Varianten Bezeichnung"
        />

        <v-spacer />

        <v-divider vertical/>

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

        <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="updateVariant()"
        >
          <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-divider/>

    <v-card-text>
      <v-row density="compact">
        <v-col cols="2" style="padding: 5px;">
          <v-row density="compact">
            <v-text-field
                v-model.trim="topm_row"
                label="TopM Zeile"
                :readonly="!edit"
                :clearable="edit"
            />
          </v-row>
          <v-row density="compact">
            <v-select
                v-model="label"
                :items="store.labels"
                label="Etiketten Typ"
                :readonly="!edit"
                :return-object="true"
                item-title="name"
                :clearable="edit"
                no-data-text="Keine Etiketten Typen angelegt"
            />
          </v-row>
          <v-row density="compact">
            <v-text-field
                v-model.trim="weight"
                label="Gewicht"
                :readonly="!edit"
            />
          </v-row>
          <v-row density="compact">
            <v-select
                v-model="unit"
                :items="store.units"
                label="Einheit"
                :readonly="!edit"
            />
          </v-row>
        </v-col>

        <v-col cols="5" style="padding: 5px;">
          <v-row density="compact">
            <v-text-field
                v-model.trim="name"
                :readonly="!edit"
                label="Produkt Bezeichnung"
                :clearable="edit"
                :placeholder="store.articleEdit.name"
                :hint="store.articleEdit.name"
                persistent-placeholder
                :persistent-hint="store.articleEdit.additional_name != null"
            />
          </v-row>

          <v-row density="compact">
            <v-textarea
                v-model.trim="description"
                :tile=true
                label="Beschreibung"
                counter
                :persistentCounter=true
                rows="6"
                no-resize
                :readonly="!edit"
                :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.description : undefined) : undefined"
                persistent-placeholder
                :clearable="edit"
            >
              <template v-slot:counter="{ counter }">
                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
              </template>
            </v-textarea>
          </v-row>
        </v-col>

        <v-col cols="5" style="padding: 5px;">
          <v-row density="compact">
            <v-text-field
                v-model.trim="ean"
                label="EAN"
                :readonly="!edit"
                :clearable="edit"
            />
          </v-row>

          <v-row density="compact">
            <v-textarea
                v-model.trim="ingredients"
                :tile=true
                label="Zutaten"
                counter
                :persistentCounter=true
                rows="6"
                no-resize
                :readonly="!edit"
                :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
                persistent-placeholder
                :clearable="edit"
            >
              <template v-slot:counter="{ counter }">
                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
              </template>
            </v-textarea>
          </v-row>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<style scoped>

</style>