<script setup lang="ts">
// Components
import type { FormErrors } from '~/types/error'
import { Form } from '~/components/pub/ui/form'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
import * as DE from '~/components/pub/my-ui/doc-entry'

// Helpers

// Types
import { toTypedSchema } from '@vee-validate/zod'

// Handlers
import {
  isReadonly,
  isProcessing,
  isFormEntryDialogOpen,
  isRecordConfirmationOpen,
  onResetState,
  handleActionSave,
  handleActionEdit,
  handleActionRemove,
  handleCancelForm,
} from '~/handlers/procedure-src.handler'

// Services
import { getList, getDetail } from '~/services/procedure-src.service'
import SelectMedicine from '../_common/select-medicine.vue'
import SelectMedicineForm from '../_common/select-medicine-form.vue'

interface Props {
  schema: any
  initialValues?: any
  errors?: FormErrors
  medicineData: any[]
  medicineFormsData: any[]
}
const props = defineProps<Props>()

const emit = defineEmits<{
  toggleDialog: []
}>()

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="6" :cell-flex="false">      
      <DE.Cell :col-span="6">   
        <SelectMedicine :errors="errors"
          field-name="a1"
          label="Obat" placeholder="Pilih Obat"
        />
      </DE.Cell>
      <DE.Cell :col-span="4" class="mt-1.5">
        <h1 class="mb-1">Signa</h1>
        <div class="flex items-start gap-3">
          <InputBase :errors="errors"
            field-name="a2"
            label="" placeholder="0"
            right-label="Frekuensi"
            numeric-only
          /> 
          <p class="text-3xl text-gray-400">X</p>
          <InputBase :errors="errors"
            field-name="a3"
            label="" placeholder="0"
            right-label="Dosis"
            numeric-only
          />
        </div>
      </DE.Cell>  
      <DE.Cell :col-span="2">   
        <SelectMedicineForm :errors="errors"
          field-name="a4"
          label="Satuan" placeholder="Pilih Satuan"
        />
      </DE.Cell>  
      <DE.Cell :col-span="3">   
        <InputBase :errors="errors"
          field-name="a5"
          label="Jumlah" placeholder="Masukkan Jumlah"
        /> 
      </DE.Cell> 
      <DE.Cell :col-span="3">  
        <InputBase :errors="errors"
          field-name="a6"
          label="Durasi Pemberian" placeholder="Masukkan Durasi Pemberian"
          right-label="Hari"
          numeric-only
        /> 
      </DE.Cell>  
    </DE.Block>
  </Form>
</template>