<script setup lang="ts">
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
// Helpers
import type z from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
// import { ref, watch, inject } from 'vue'

const props = defineProps<{
  modelValue: any
  schema: z.ZodSchema<any>
  excludeFields?: string[]
  isReadonly?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: any): void
  (e: 'submit', val: any): void
}>()

// Setup form
const {
  validate: _validate,
  defineField,
  handleSubmit,
  errors,
  values,
} = useForm({
  validationSchema: toTypedSchema(props.schema),
  initialValues: props.modelValue,
})

watch(values, (val) => emit('update:modelValue', val), { deep: true })

// Define form fields
// const [relatives, relativesAttrs] = defineField('relatives')
const [date, dateAttrs] = defineField('date')
const [doctor, doctorAttrs] = defineField('doctor')
const [diagnosis, diagnosisAttrs] = defineField('diagnosis')
const [essay, essayAttrs] = defineField('essay')
const [plan, planAttrs] = defineField('plan')
const [note, noteAttrs] = defineField('note')

const tanggal = ref('')
const tanggalAttrs = ref({
  type: 'date',
  required: true,
  disabled: props.isReadonly,
})

// Relatives list handling
const addRelative = () => {
  relatives.value = [...(relatives.value || []), { name: '', phone: '' }]
}

const removeRelative = (index: number) => {
  relatives.value = relatives.value.filter((_: any, i: number) => i !== index)
}

const validate = async () => {
  const result = await _validate()
  return {
    valid: true,
    data: result.values,
    errors: result.errors,
  }
}

defineExpose({ validate })

const icdPreview = inject('icdPreview')

const isExcluded = (key: string) => props.excludeFields?.includes(key)
</script>

<template>
  <form id="entry-form">
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <Block :colCount="2">
        <Cell>
          <Label dynamic>Tanggal</Label>
          <Field>
            <Input
              v-model="date"
              v-bind="dateAttrs"
              type="date"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Dokter</Label>
          <Field>
            <Input
              v-model="doctor"
              v-bind="doctorAttrs"
            />
          </Field>
        </Cell>
      </Block>
      <Block :colCount="2">
        <Cell>
          <Label dynamic>Diagnosis Penting</Label>
          <Field>
            <Textarea
              v-model="diagnosis"
              v-bind="diagnosisAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Uraian Klinik Penting</Label>
          <Field>
            <Textarea
              v-model="essay"
              v-bind="essayAttrs"
            />
          </Field>
        </Cell>
      </Block>
      <Block :colCount="2">
        <Cell>
          <Label dynamic>Rencana Penting</Label>
          <Field>
            <Textarea
              v-model="plan"
              v-bind="planAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Catatan</Label>
          <Field>
            <Textarea
              v-model="note"
              v-bind="noteAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <Separator class="mt-8" />
    </div>
  </form>
</template>
