<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry'
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { Form } from '~/components/pub/ui/form'
import SelectDate from './_common/select-date.vue'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import SelectVaccineType from './_common/select-vaccine-type.vue'

const props = withDefaults(defineProps<{
  schema: any
  initialValues?: any
  errors?: FormErrors
}>(), {

})

const formSchema = toTypedSchema(props.schema)
const formRef = ref()

defineExpose({
  validate: () => formRef.value?.validate(),
  resetForm: () => formRef.value?.resetForm(),
  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
  values: computed(() => formRef.value?.values),
})
</script>

<template>
  <Form
    ref="formRef"
    v-slot="{ values }"
    as=""
    keep-values
    :validation-schema="formSchema"
    :validate-on-mount="false"
    validation-mode="onSubmit"
    :initial-values="initialValues ? initialValues : {}"
  >
    <DE.Block :col-count="3" :cell-flex="false">
      <SelectVaccineType :errors="errors"
        field-name="a1"
        label="Jenis Vaksin" placeholder="Pilih Jenis Vaksin"
        is-required
      />
      <SelectDate
        field-name="a2"
        label="Tanggal Pemberian Vaksin"
        :errors="errors"
        is-with-time
      />
      <SelectDate
        field-name="a3"
        label="Tanggal Kedaluwarsa Vaksin"
        :errors="errors"
        is-with-time
      />
    </DE.Block>
    
    <DE.Block :col-count="2" :cell-flex="false">
      <InputBase :errors="errors"
        field-name="a4"
        label="Nomor Batch Vaksin" placeholder="Isi Nomor Batch Vaksin"
      />
      <InputBase :errors="errors"
        field-name="a5"
        label="Dosis Vaksin" placeholder="Isi Dosis Vaksin"
        right-label="ml"
        numeric-only
      />
      <InputBase :errors="errors"
        field-name="a6"
        label="Dosis Ke" placeholder="Isi Dosis Ke"
        numeric-only
      />
      <InputBase :errors="errors"
        field-name="a7"
        label="Lokasi Injeksi" placeholder="Isi Lokasi Injeksi"
      />
    </DE.Block>
  </Form>
</template>
