<script setup lang="ts">
// types
import type z from 'zod'
import type { MaterialFormData } from '~/schemas/material'
<<<<<<< HEAD:app/components/app/equipment/entry-form.vue
=======
// helpers
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
// components
import Label from '~/components/pub/custom-ui/form/label.vue'
>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/components/app/material/entry-form.vue

interface Props {
  schema: z.ZodSchema<any>
  uoms: any[]
  items: any[]
}

const isLoading = ref(false)
const props = defineProps<Props>()
const emit = defineEmits<{
  submit: [values: MaterialFormData, resetForm: () => void]
  cancel: [resetForm: () => void]
}>()

const { handleSubmit, defineField, errors } = useForm({
  validationSchema: toTypedSchema(props.schema),
  initialValues: {
    code: '',
    name: '',
    uom_code: '',
    item_id: '',
    stock: 0,
  } as Partial<MaterialFormData>,
})

const [code, codeAttrs] = defineField('code')
const [name, nameAttrs] = defineField('name')
const [uom, uomAttrs] = defineField('uom_code')
const [item, itemAttrs] = defineField('item_id')
const [stock, stockAttrs] = defineField('stock')

const resetForm = () => {
  code.value = ''
  name.value = ''
  uom.value = ''
  item.value = ''
  stock.value = 0
}

// Form submission handler
function onSubmitForm(values: any) {
  const formData: MaterialFormData = {
    name: values.name || '',
    code: values.code || '',
    uom_code: values.uom_code || '',
    item_id: values.item_id || '',
    stock: values.stock || 0,
  }
  emit('submit', formData, resetForm)
}

// Form cancel handler
function onCancelForm() {
  emit('cancel', resetForm)
}
</script>

<template>
  <form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
    <div class="grid gap-2">
      <label for="code">Kode</label>
      <Input
        id="code"
        v-model="code"
        v-bind="codeAttrs"
        :disabled="isLoading"
        :class="{ 'border-red-500': errors.code }"
      />
      <span v-if="errors.code" class="text-sm text-red-500">
        {{ errors.code }}
      </span>
    </div>
    <div class="grid gap-2">
      <label for="name">Nama</label>
      <Input
        id="name"
        v-model="name"
        v-bind="nameAttrs"
        :disabled="isLoading"
        :class="{ 'border-red-500': errors.name }"
      />
      <span v-if="errors.name" class="text-sm text-red-500">
        {{ errors.name }}
      </span>
    </div>
    <div class="grid gap-2">
      <label for="uom">Satuan</label>
      <Select
        id="uom"
        v-model="uom"
        icon-name="i-lucide-chevron-down"
        placeholder="Pilih satuan"
        v-bind="uomAttrs"
        :items="uoms"
        :disabled="isLoading"
        :class="{ 'border-red-500': errors.uom_code }"
      />
      <span v-if="errors.uom_code" class="text-sm text-red-500">
        {{ errors.uom_code }}
      </span>
    </div>
    <div class="grid gap-2">
      <label for="item">Item</label>
      <Select
        id="item"
        v-model="item"
        icon-name="i-lucide-chevron-down"
        placeholder="Pilih item"
        v-bind="itemAttrs"
        :items="items"
        :disabled="isLoading"
        :class="{ 'border-red-500': errors.item_id }"
      />
      <span v-if="errors.item_id" class="text-sm text-red-500">
        {{ errors.item_id }}
      </span>
    </div>
    <div class="grid gap-2">
      <label for="stock">Stok</label>
      <Input
        id="stock"
        v-model="stock"
        type="number"
        v-bind="stockAttrs"
        :disabled="isLoading"
        :class="{ 'border-red-500': errors.stock }"
      />
      <span v-if="errors.stock" class="text-sm text-red-500">
        {{ errors.stock }}
      </span>
    </div>
    <div class="my-2 flex justify-end gap-2 py-2">
      <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
      <Button type="submit" class="w-[120px]">
        <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
        Simpan
      </Button>
    </div>
  </form>
</template>
