<script setup lang="ts">
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 SelectSpeciality from './_common/select-specialist.vue'
import SelectDpjp from './_common/select-dpjp.vue'

import * as DE from '~/components/pub/my-ui/doc-entry'
import SelectUnit from './_common/select-unit.vue'
import SelectSubspecialist from './_common/select-subspecialist.vue'
import SelectSpecialist from './_common/select-specialist.vue'

const props = defineProps<{
  schema: any
  initialValues?: any
  errors?: FormErrors

  selectedUnitId?: number | null
  selectedSpecialistId?: number | null
  selectedSubSpecialistId?: number | null
}>()

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="sepStatus"
        label="Status Sep"
        placeholder="Status Sep"
        :is-disabled="true"
      />
      <SelectDate
        field-name="date"
        label="Tanggal Rencana Kontrol"
        :errors="errors"
        is-required
      />
      <DE.Cell :col-span="2">
        <DE.Block :col-count="4" :cell-flex="false">
          <SelectUnit
            field-name="unit_code"
            label="Unit"
            placeholder="Pilih Unit"
            :errors="errors"
            is-required
          />
          <SelectSpecialist
            field-name="specialist_code"
            label="Spesialis/Sub Spesialis"
            placeholder="Pilih Spesialis/Sub Spesialis"
            :errors="errors"
            is-required
          />
          <SelectSubspecialist
            field-name="subspecialist_code"
            label="Spesialis/Sub Spesialis"
            placeholder="Pilih Spesialis/Sub Spesialis"
            :errors="errors"
            is-required
          />
          <SelectDpjp
            field-name="doctor_code"
            label="DPJP"
            placeholder="Pilih DPJP"
            :errors="errors"
            is-required
          />
        </DE.Block>
      </DE.Cell>
    </DE.Block>    
  </Form>
</template>
