<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 [subjective, subjectiveAttrs] = defineField('subjective')
const [objective, objectiveAttrs] = defineField('objective')
const [assesment, assesmentAttrs] = defineField('assesment')
const [plan, planAttrs] = defineField('plan')
const [review, reviewAttrs] = defineField('review')

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

  return {
    valid: true,
    data: result.values,
    errors: result.errors,
  }
}

defineExpose({ validate })
</script>

<template>
  <form id="entry-form">
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <div class="my-2">
        <h1 class="font-semibold">Data Petugas</h1>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="2">
          <Cell>
            <Label dynamic>PPA</Label>
            <Field>
              <Input disabled />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Nama PPA</Label>
            <Field>
              <Input disabled />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2">
        <h1 class="font-semibold">Data S.O.A.P</h1>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Subjektif</Label>
            <Field>
              <Textarea
                v-model="subjective"
                v-bind="subjectiveAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Objektif</Label>
            <Field>
              <Textarea
                v-model="objective"
                v-bind="objectiveAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Assesmen</Label>
            <Field>
              <Textarea
                v-model="assesment"
                v-bind="assesmentAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Plan</Label>
            <Field>
              <Textarea
                v-model="plan"
                v-bind="planAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block>
          <Cell>
            <Label dynamic>Review</Label>
            <Field>
              <Textarea
                v-model="review"
                v-bind="reviewAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>
      <Separator class="mt-8" />
    </div>
  </form>
</template>
