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

  let store = useLabelEditorStore();

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

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

</script>

<template>
  <v-card>
    <v-card-title>
      <v-row>
        {{ variant.name }}

        <v-spacer />

        <v-divider vertical/>

        <v-btn
            :flat="true"
            size="small"
            :disabled="!edit"
        >
          <v-icon>mdi-delete-empty</v-icon>
          <v-tooltip
              activator="parent"
              location="bottom"
          >
            Löschen
          </v-tooltip>
        </v-btn>

        <v-divider vertical/>

        <v-btn
            :flat="true"
            size="small"
            :disabled="!edit"
        >
          <v-icon>mdi-cancel</v-icon>
          <v-tooltip
              activator="parent"
              location="bottom"
          >
            Abbrechen
          </v-tooltip>
        </v-btn>

        <v-btn
            :flat="true"
            size="small"
            :disabled="!edit"
        >
          <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"
            size="small"
        >
          <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
          align="start"
      >
        <v-col cols="2">
          <v-row>
            <v-text-field
                v-model.trim="variant.weight"
                label="Gewicht"
                :readonly="true"
            />
          </v-row>
          <v-row>
            <v-text-field
                v-model.trim="variant.ean"
                label="EAN"
                :readonly="true"
            />
          </v-row>
        </v-col>

        <v-col cols="5">
          <v-textarea
              :model-value="variant.description"
              :tile=true
              label="Beschreibung"
              counter
              :persistentCounter=true
              rows="6"
              no-resize
              :readonly="true"
          >
            <template v-slot:counter="{ counter }">
              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
            </template>
          </v-textarea>
        </v-col>

        <v-col cols="5">
          <v-textarea
              :model-value="variant.ingredients"
              :tile=true
              label="Zutaten"
              counter
              :persistentCounter=true
              rows="6"
              no-resize
              :readonly="true"
          >
            <template v-slot:counter="{ counter }">
              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
            </template>
          </v-textarea>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<style scoped>

</style>