<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 TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
import { cn } from '~/lib/utils'
import RadioFollowup from './_common/radio-followup.vue'

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

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

// const isMedicalDiagnosisPickerDialogOpen = ref<boolean>(false)
// const isFunctionalDiagnosisPickerDialogOpen = ref<boolean>(false)
// const isProcedurePickerDialogOpen = ref<boolean>(false)

// function toggleMedicalDiagnosisPickerDialog() {
//   isMedicalDiagnosisPickerDialogOpen.value = !isMedicalDiagnosisPickerDialogOpen.value
// }
// function toggleFunctionalDiagnosisPickerDialog() {
//   isFunctionalDiagnosisPickerDialogOpen.value = !isFunctionalDiagnosisPickerDialogOpen.value
// }

// provide(`isDiagnosisPickerDialogOpen`, isDiagnosisPickerDialogOpen)
// provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)        

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">

    <!-- FORM 1 -->
    <DE.Block :col-count="2" :cell-flex="false">
      <DE.Cell :col-span="2">
        <TextAreaInput
          field-name="subjective"
          label="Subjective"
          placeholder="Subjective"
          class="w-1/2"
          :errors="errors" />
      </DE.Cell>
      <DE.Cell :col-span="2" >
        <TextAreaInput
          field-name="objective"
          label="Objective"
          placeholder="Masukkan Objective"
          class="w-1/2"
          :errors="errors" />
      </DE.Cell>
      <DE.Cell :col-span="2">
        <TextAreaInput
          field-name="assesment"
          label="Assesment"
          placeholder="Masukkan Assesment"
          class="w-1/2"
          :errors="errors" />
      </DE.Cell>

      <DE.Cell class="mt-2 px-4 bg-gray-50 border rounded-lg" :col-span="2">
        <DE.Block :col-count="2" :cell-flex="false">
          <TextAreaInput
            field-name="planningGoal"
            label="Goal of Treatment"
            placeholder="Masukkan Goal of Treatment"
            :errors="errors" />
          <TextAreaInput
            field-name="planningAction"
            label="Tindakan/Program Rehabilitasi Medik"
            placeholder="Masukkan Tindakan/Program Rehabilitasi Medik"
            :errors="errors" />
          <TextAreaInput
            field-name="planningEducation"
            label="Edukasi"
            placeholder="Masukkan Edukasi"
            :errors="errors" />
          <InputBase
            field-name="planningFrequency"
            label="Frekuensi Kunjungan"
            right-label="x Minggu"
            placeholder="Masukkan Frekuensi Kunjungan"
            :errors="errors"
            numeric-only
            is-disabled 
          />
        </DE.Block>
      </DE.Cell>

      <DE.Cell :col-span="2">      
        <RadioFollowup
          field-name="followUpPlan"
          label="Rencana Tindak Lanjut"
          :errors="errors"
          is-required
        />
        <TextAreaInput
          label=""
          field-name="followUpPlanDesc"
          placeholder="Masukkan Keterangan rencana tindak lanjut"
          class="w-1/2 mt-3"
          :errors="errors" />
      </DE.Cell>

      

    </DE.Block>
  </Form>
</template>
