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

const props = 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="2" :cell-flex="false">
      <InputBase
        field-name="officer"
        label="Petugas Upload"
        placeholder="Masukkan Petugas Upload"
        :is-disabled="true"
      />
      <DE.Cell :col-span="2">
        <Separator class="w-full my-4"/>
        <DE.Block :col-count="3" :cell-flex="false">
          <InputBase
            field-name="name"
            label="Nama Dokumen"
            placeholder="Maukkan Nama Dokumen"
          />
          <SelectDocType
            field-name="type_code"
            label="Tipe Dokumen"
            placeholder="Pilih Jenis Dokumen"
            :errors="errors"
            is-required
          />
          <FileField
            field-name="content"
            label="Upload Dokumen"
            placeholder="Unggah dokumen"
            :errors="errors"
            :accept="['pdf', 'jpg', 'png']"
            :max-size-mb="1"
          />
        </DE.Block>
      </DE.Cell>
    </DE.Block>    
  </Form>
</template>
