<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { Form } from '~/components/pub/ui/form'
import { toTypedSchema } from '@vee-validate/zod'
import Block from '~/components/pub/my-ui/form/block.vue'
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
import Field from '~/components/pub/my-ui/form/field.vue'
import Label from '~/components/pub/my-ui/form/label.vue'
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
import { mapToComboboxOptList } from '~/lib/utils'

interface DivisionFormData {
  name: string
  code: string
  parentId: string
}

const props = defineProps<{
  division: {
    msg: {
      placeholder: string
      search: string
      empty: string
    }
  }
  items: {
    value: string
    label: string
    code: string
  }[]
  schema: any
  initialValues?: Partial<DivisionFormData>
  errors?: FormErrors
}>()

const emit = defineEmits<{
  submit: [values: DivisionFormData, resetForm: () => void]
  cancel: [resetForm: () => void]
}>()

const educationOpts = mapToComboboxOptList(educationCodes)
const occupationOpts = mapToComboboxOptList(occupationCodes)
const religionOpts = mapToComboboxOptList(religionCodes)
const genderOpts = mapToComboboxOptList(genderCodes)

const formSchema = toTypedSchema(props.schema)

// Form submission handler
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
  const formData: DivisionFormData = {
    name: values.name || '',
    code: values.code || '',
    parentId: values.parentId || '',
  }
  emit('submit', formData, resetForm)
}
</script>

<template>
  <Form
    v-slot="{ handleSubmit, resetForm }"
    as=""
    keep-values
    :validation-schema="formSchema"
    :initial-values="initialValues"
  >
    <form
      id="entry-form"
      @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))"
    >
      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
        <div class="flex flex-col justify-between">
          <Block>
            <FieldGroup>
              <Label label-for="residentIdentityNumber">KTP</Label>
              <Field
                id="residentIdentityNumber"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="residentIdentityNumber"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="residentIdentityNumber"
                        type="text"
                        maxlength="16"
                        placeholder="Nomor KTP"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- FrontTitle -->
            <FieldGroup :column="3">
              <Label label-for="frontTitle">Gelar Depan</Label>
              <Field
                id="frontTitle"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="frontTitle"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="frontTitle"
                        type="text"
                        placeholder="Dr., Ir., dll"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <FieldGroup :column="3">
              <Label
                label-for="name"
                position="dynamic"
              >
                Nama
              </Label>
              <Field
                id="name"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="name"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="name"
                        type="text"
                        placeholder="Nama lengkap"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- EndTitle -->
            <FieldGroup :column="3">
              <Label
                label-for="endTitle"
                position="dynamic"
              >
                Gelar Belakang
              </Label>
              <Field
                id="endTitle"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="endTitle"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="endTitle"
                        type="text"
                        placeholder="S.Kom, M.Kes, dll"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- BirthDate -->
            <FieldGroup :column="2">
              <Label label-for="birthDate">Tanggal Lahir</Label>
              <Field
                id="birthDate"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="birthDate"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="birthDate"
                        type="date"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- BirthRegency_Code -->
            <FieldGroup :column="2">
              <Label label-for="birthRegencyCode">Tempat Lahir</Label>
              <Field
                id="birthRegencyCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="birthRegencyCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="parentId"
                        v-bind="componentField"
                        :items="educationOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- Gender_Code -->
            <FieldGroup>
              <Label label-for="genderCode">Jenis Kelamin</Label>
              <Field
                id="genderCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="genderCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="genderCode"
                        v-bind="componentField"
                        :items="genderOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- PassportNumber -->
            <FieldGroup :column="2">
              <Label label-for="passportNumber">Paspor</Label>
              <Field
                id="passportNumber"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="passportNumber"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="passportNumber"
                        type="text"
                        placeholder="Nomor Paspor"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- DrivingLicenseNumber -->
            <FieldGroup :column="2">
              <Label label-for="drivingLicenseNumber">SIM</Label>
              <Field
                id="drivingLicenseNumber"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="drivingLicenseNumber"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="drivingLicenseNumber"
                        type="text"
                        placeholder="Nomor SIM"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- Religion_Code -->
            <FieldGroup :column="2">
              <Label label-for="religionCode">Agama</Label>
              <Field
                id="religionCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="religionCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="religionCode"
                        v-bind="componentField"
                        :items="religionOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <FieldGroup :column="2">
              <Label label-for="ethnicCode">Suku</Label>
              <Field
                id="ethnicCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="ethnicCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="ethnicCode"
                        v-bind="componentField"
                        :items="occupationOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- Language_Code -->
            <FieldGroup :column="2">
              <Label label-for="languageCode">Bahasa</Label>
              <Field
                id="languageCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="languageCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="parentId"
                        v-bind="componentField"
                        :items="educationOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- Education_Code -->
            <FieldGroup :column="2">
              <Label label-for="educationCode">Pendidikan</Label>
              <Field
                id="educationCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="educationCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="educationCode"
                        v-bind="componentField"
                        :items="educationOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- Occupation_Code -->
            <FieldGroup :column="2">
              <Label label-for="occupationCode">Pekerjaan</Label>
              <Field
                id="occupationCode"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="occupationCode"
                >
                  <FormItem>
                    <FormControl>
                      <Combobox
                        id="occupationCode"
                        v-bind="componentField"
                        :items="occupationOpts"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>

            <!-- Occupation_Name -->
            <FieldGroup :column="2">
              <Label label-for="occupationName">Detail Pekerjaan</Label>
              <Field
                id="occupationName"
                :errors="errors"
              >
                <FormField
                  v-slot="{ componentField }"
                  name="occupationName"
                >
                  <FormItem>
                    <FormControl>
                      <Input
                        id="occupationName"
                        type="text"
                        placeholder="Contoh: Guru SMP, Petani"
                        autocomplete="off"
                        v-bind="componentField"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                </FormField>
              </Field>
            </FieldGroup>
          </Block>
        </div>
      </div>
    </form>
  </Form>
</template>
