<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 [medicalPlan, medicalPlanAttrs] = defineField('medical-plan')
const [diagnosisMedical, diagnosisMedicalAttrs] = defineField('diagnosis-medical')
const [rehabTrouble, rehabTroubleAttrs] = defineField('rehab-trouble')
const [medicalTrouble, medicalTroubleAttrs] = defineField('medical-trouble')
const [physicModal, physicModalAttrs] = defineField('physic-modal')
const [exercise, exerciseAttrs] = defineField('exercise')
const [orthoPesa, orthoPesaAttrs] = defineField('ortho-pesa')
const [education, educationAttrs] = defineField('education')
const [other, otherAttrs] = defineField('other')
const [cranialis, cranialisAttrs] = defineField('cranialis')
const [sensoris, sensorisAttrs] = defineField('sensoris')
const [reflectFisio, reflectFisioAttrs] = defineField('reflect-fisio')
const [reflectPato, reflectPatoAttrs] = defineField('reflect-pato')
const [otonom, otonomAttrs] = defineField('otonom')
const [localis, localisAttrs] = defineField('localis')
const [medicalTrial, medicalTrialAttrs] = defineField('medical-trial')
const [therapy, therapyAttrs] = defineField('therapy')
const [systolic, systolicAttrs] = defineField('syst-bp')
const [diastolic, diastolicAttrs] = defineField('diast-bp')
const [pulse, pulseAttrs] = defineField('pulse')
const [gcs, gcsAttrs] = defineField('gcs')
const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
const [temperature, temperatureAttrs] = defineField('temperature')
const [weight, weightAttrs] = defineField('weight')
const [height, heightAttrs] = defineField('height')
const [ambulance, ambulanceAttrs] = defineField('ambulance')
const [gait, gaitAttrs] = defineField('gait')
const [neckRom, neckRomAttrs] = defineField('neck-rom')
const [bodyRom, bodyRomAttrs] = defineField('body-rom')
const [agaRom, agaRomAttrs] = defineField('aga-rom')
const [agbRom, agbRomAttrs] = defineField('agb-rom')
const [neckMmt, neckMmtAttrs] = defineField('neck-mmt')
const [bodyMmt, bodyMmtAttrs] = defineField('body-mmt')
const [agaMmt, agaMmtAttrs] = defineField('aga-mmt')
const [agbMmt, agbMmtAttrs] = defineField('agb-mmt')

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">
      <div>
        <h1 class="font-semibold">Pemeriksaan Fisiatrik</h1>
        <span class="text-sm font-semibold">Anamnesa</span>
      </div>
      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block>
          <Cell>
            <Label dynamic>Keluhan Utama</Label>
            <Field :errMessage="errors['prim-compl']">
              <Textarea
                v-model="primaryComplaint"
                v-bind="primaryComplaintAttrs"
              />
            </Field>
          </Cell>
        </Block>

        <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>
      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
        <span class="text-sm font-semibold">Status Generalis</span>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Tekanan Darah</Label>
            <Field>
              <Input
                placeholder="Sistolik"
                v-model="systolic"
                v-bind="systolicAttrs"
              />
              <Input
                placeholder="Diastolik"
                v-model="diastolic"
                v-bind="diastolicAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Nadi</Label>
            <Field>
              <Input
                v-model="pulse"
                v-bind="pulseAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>GCS</Label>
            <Field>
              <Input
                v-model="gcs"
                v-bind="gcsAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="3">
          <Cell>
            <Label dynamic>RR</Label>
            <Field>
              <Input
                v-model="respiratoryRate"
                v-bind="respiratoryRateAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Ambulasi</Label>
            <Field>
              <RadioGroup
                class="flex gap-4"
                v-model="ambulance"
                v-bind="ambulanceAttrs"
              >
                <div class="flex items-center space-x-2">
                  <RadioGroupItem
                    id="vaksin-yes"
                    value="yes"
                  />
                  <Label for="vaksin-yes">Dependent</Label>
                </div>
                <div class="flex items-center space-x-2">
                  <RadioGroupItem
                    id="vaksin-no"
                    value="no"
                  />
                  <Label for="vaksin-no">Independen</Label>
                </div>
              </RadioGroup>
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Gait</Label>
            <Field>
              <Textarea
                v-model="gait"
                v-bind="gaitAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2">
        <span class="text-sm font-semibold">Status Neurologis</span>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>N. Cranialis</Label>
            <Field>
              <Input
                v-model="cranialis"
                v-bind="cranialisAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Sensoris</Label>
            <Field>
              <Input
                v-model="sensoris"
                v-bind="sensorisAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Reflek Fisilogis</Label>
            <Field>
              <Input
                v-model="reflectFisio"
                v-bind="reflectFisioAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Reflek Patologis</Label>
            <Field>
              <Input
                v-model="reflectPato"
                v-bind="reflectPatoAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Saraf Otonom</Label>
            <Field>
              <Input
                v-model="otonom"
                v-bind="otonomAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2">
        <span class="text-sm font-semibold">Status Muskuloskeletal - ROM</span>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Leher</Label>
            <Field>
              <Input
                v-model="neckRom"
                v-bind="neckRomAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Batang Tubuh</Label>
            <Field>
              <Input
                v-model="bodyRom"
                v-bind="bodyRomAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>AGA</Label>
            <Field>
              <Input
                v-model="agaRom"
                v-bind="agaRomAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>AGB</Label>
            <Field>
              <Input
                v-model="agbRom"
                v-bind="agbRomAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2">
        <span class="text-sm font-semibold">Status Muskuloskeletal - MMT</span>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Leher</Label>
            <Field>
              <Input
                v-model="neckMmt"
                v-bind="neckMmtAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Batang Tubuh</Label>
            <Field>
              <Input
                v-model="bodyMmt"
                v-bind="bodyMmtAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>AGA</Label>
            <Field>
              <Input
                v-model="agaMmt"
                v-bind="agaMmtAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>AGB</Label>
            <Field>
              <Input
                v-model="agbMmt"
                v-bind="agbMmtAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2">
        <span class="text-sm font-semibold">Statu Lokalis</span>
      </div>

      <Block>
        <Cell>
          <Label dynamic>Deskripsi Temuan Fisik</Label>
          <Field>
            <Textarea
              v-model="localis"
              v-bind="localisAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
      </div>

      <Block>
        <Cell>
          <Label dynamic>Catatan Pemeriksaan Penunjang</Label>
          <Field>
            <Textarea
              v-model="medicalTrial"
              v-bind="medicalTrialAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">Daftar Masalah</h1>
      </div>

      <Block :colCount="2">
        <Cell>
          <Label dynamic>Masalah Medik</Label>
          <Field>
            <Textarea
              v-model="medicalTrouble"
              v-bind="medicalTroubleAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Masalah Rehabilitasi Medik</Label>
          <Field>
            <Textarea
              v-model="rehabTrouble"
              v-bind="rehabTroubleAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>

        <Button
          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
          type="button"
          @click="emit('click', 'fungsional')"
        >
          + Pilih Prosedur
        </Button>
      </div>

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

      <div class="my-2">
        <h1 class="font-semibold">Program Rehabilitasi</h1>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Modalitas Fisik</Label>
            <Field>
              <Textarea
                v-model="physicModal"
                v-bind="physicModalAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Latihan</Label>
            <Field>
              <Textarea
                v-model="exercise"
                v-bind="exerciseAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Ortesa Protesa</Label>
            <Field>
              <Textarea
                v-model="orthoPesa"
                v-bind="orthoPesaAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Edukasi</Label>
            <Field>
              <Textarea
                v-model="education"
                v-bind="educationAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Lain-Lain</Label>
            <Field>
              <Textarea
                v-model="other"
                v-bind="otherAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>
    </div>
  </form>
</template>
