<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 { genBase } from '~/models/_base'

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 })

const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
const [curDiseaseHistory, curDiseaseHistoryAttrs] = defineField('cur-disea-hist')
const [systolic, systolicAttrs] = defineField('syst-bp')
const [diastolic, diastolicAttrs] = defineField('diast-bp')
const [pulse, pulseAttrs] = defineField('pulse')
const [respiratoryRate, respiratoryRateAttrs] = defineField('resp-rate')
const [temperature, temperatureAttrs] = defineField('temp')
const [weight, weightAttrs] = defineField('weight')
const [height, heightAttrs] = defineField('height')
const [bloodGroup, bloodGroupAttrs] = defineField('reflect-fisio')
const [physicalExamination, physicalExaminationAttrs] = defineField('reflect-pato')
const [diagnosisMedical, diagnosisMedicalAttrs] = defineField('autonom-neuron')
const [medicalPlan, medicalPlanAttrs] = defineField('medical-act')
const [therapy, therapyAttrs] = defineField('therapy')

const validate = async () => {
  const result = await _validate()
  console.log('Component validate() result:', result)

  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>
        <Cell>
          <Label dynamic>Sudah Vaksin</Label>
          <Field>
            <RadioGroup class="flex gap-4">
              <div class="flex items-center space-x-2">
                <RadioGroupItem
                  id="vaksin-yes"
                  value="yes"
                />
                <Label for="vaksin-yes">Sudah</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem
                  id="vaksin-no"
                  value="no"
                />
                <Label for="vaksin-no">Belum</Label>
              </div>
            </RadioGroup>
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Kasus</Label>
          <Field>
            <RadioGroup class="flex gap-4">
              <div class="flex items-center space-x-2">
                <RadioGroupItem
                  id="kasus-baru"
                  value="baru"
                />
                <Label for="kasus-baru">Baru</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem
                  id="kasus-lama"
                  value="lama"
                />
                <Label for="kasus-lama">Lama</Label>
              </div>
            </RadioGroup>
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Kunjungan</Label>
          <Field>
            <RadioGroup class="flex gap-4">
              <div class="flex items-center space-x-2">
                <RadioGroupItem
                  id="kunjungan-baru"
                  value="baru"
                />
                <Label for="kunjungan-baru">Baru</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem
                  id="kunjungan-lama"
                  value="lama"
                />
                <Label for="kunjungan-lama">Lama</Label>
              </div>
            </RadioGroup>
          </Field>
        </Cell>
      </Block>

      <Block :colCount="2">
        <Cell>
          <Label dynamic>Keluhan Utama</Label>
          <Field :errMessage="errors['prim-compl']">
            <Textarea
              placeholder="Masukkan anamnesa pasien"
              v-model="primaryComplaint"
              v-bind="primaryComplaintAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Riwayat Penyakit</Label>
          <Field>
            <Textarea
              placeholder=".."
              v-model="curDiseaseHistory"
              v-bind="curDiseaseHistoryAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>SpO₂</Label>
          <Field>
            <Input
              type="number"
              placeholder="%"
              v-model="spo2"
              v-bind="spo2Attrs"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Tekanan Darah Sistol</Label>
          <Field>
            <Input
              type="number"
              placeholder="mmHg"
              v-model="systolic"
              v-bind="systolicAttrs"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Tekanan Darah Diastol</Label>
          <Field>
            <Input
              v-model="diastolic"
              v-bind="diastolicAttrs"
              type="number"
              placeholder="mmHg"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Respirasi</Label>
          <Field>
            <Input
              v-model="respiratoryRate"
              v-bind="respiratoryRateAttrs"
              type="number"
              placeholder="kali/menit"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Nadi</Label>
          <Field>
            <Input
              v-model="pulse"
              v-bind="pulseAttrs"
              type="number"
              placeholder="kali/menit"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Temperatur</Label>
          <Field>
            <Input
              v-model="temperature"
              v-bind="temperatureAttrs"
              type="number"
              placeholder="℃"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Berat Badan</Label>
          <Field>
            <Input
              v-model="weight"
              v-bind="weightAttrs"
              type="number"
              placeholder="Kg"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Tinggi Badan</Label>
          <Field>
            <Input
              v-model="height"
              v-bind="heightAttrs"
              type="number"
              placeholder="Cm"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Golongan Darah</Label>
          <Field>
            <Select
              :options="bloodGroups"
              v-model="bloodGroup"
              v-bind="bloodGroupAttrs"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
          <Field>
            <Textarea
              placeholder="Masukkan pemeriksaan fisik"
              v-model="physicalExamination"
              v-bind="physicalExaminationAttrs"
            />
          </Field>
        </Cell>

        <!-- Prosedur -->
        <Cell>
          <Label dynamic>Diagnosa (ICD-X)</Label>
          <Field>
            <Button
              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
              type="button"
              @click="emit('modal', 'diagnosa')"
            >
              + Pilih Diagnosa
            </Button>
          </Field>
        </Cell>
        <!-- Diagnosa -->
        <Cell>
          <Label dynamic>Diagnosa (ICD-X)</Label>
          <Field>
            <Button
              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
              type="button"
              @click="emit('modal', 'prosedur')"
            >
              + Pilih Prosedur
            </Button>
          </Field>
        </Cell>
      </Block>

      <div class="mb-8 grid grid-cols-2 gap-4">
        <AppIcdPreview v-model="icdPreview.diagnoses" />
        <AppIcdPreview v-model="icdPreview.procedures" />
      </div>

      <Block :colCount="3">
        <Cell>
          <Label dynamic>Diagnosa Medis</Label>
          <Field>
            <Textarea
              v-model="diagnosisMedical"
              v-bind="diagnosisMedicalAttrs"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Rencana Awal Medis</Label>
          <Field>
            <Textarea
              v-model="medicalPlan"
              v-bind="medicalPlanAttrs"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Terapi</Label>
          <Field>
            <Textarea
              v-model="therapy"
              v-bind="therapyAttrs"
            />
          </Field>
        </Cell>
      </Block>
    </div>
  </form>
</template>
