<script lang="ts" setup>
import { provide, ref } from 'vue'
import { VForm } from 'vuetify/components/VForm'
import StoreTabItemH from '@/views/pages/store/view/StoreTabItemH.vue'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { t } = useI18n()

const itemForm = ref('')
const injItemForm = ref('')
const refItemForm = ref<VForm>()

provide('item', injItemForm)

const validateItemForm = () => {
  refItemForm.value?.validate().then(valid => {
    if (valid.valid) {
      console.log(itemForm.value)
      injItemForm.value = itemForm.value
    }
    else { console.log(`KO:${itemForm.value}`) }
  })
}

const lengthMinValidator = (value: unknown, length: number) => {
  if (isEmpty(value))
    return true

  return String(value).length >= length || `The Min Character field must be at least ${length} characters`
}
</script>

<template>
  <div>
    <VRow>
      <VCol cols="12">
        <!-- 👉 Item search -->
        <VCard title="">
          <VCardText>
            <VAlert
              variant="tonal"
              color="warning"
              class="mb-4"
            >
              <VAlertTitle class="mb-2">
                {{ $t('You can search for a reference, reference-color or reference-color-size.') }}
              </VAlertTitle>
              <span>{{ $t('Minimum 5 characters long') }}</span>
            </VAlert>

            <VForm
              ref="refItemForm"
              @submit.prevent="validateItemForm"
            >
              <VRow>
                <VCol
                  cols="12"
                  md="6"
                >
                  <AppTextField
                    v-model="itemForm"
                    label="Reference"
                    persistent-placeholder
                    placeholder="QY10010"
                    :rules="[requiredValidator, lengthMinValidator(itemForm, 5)]"
                  />
                </VCol>
                <VCol cols="12">
                  <VBtn type="submit">
                    {{ $t('Submit') }}
                  </VBtn>
                </VCol>
              </VRow>
            </VForm>
          </VCardText>

          <VCol cols="12">
            <StoreTabItemH />
          </VCol>
        </VCard>
      </VCol>
    </VRow>
  </div>
</template>
