<script setup lang="ts">
// Components
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'
import Button from '~/components/pub/ui/button/Button.vue'
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'

// Constants
import { infraGroupCodesKeys } from '~/lib/constants'

// Types
import type { InfraFormData } from '~/schemas/infra.schema'

// Helpers
import type z from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'

interface Props {
  schema: z.ZodSchema<any>
  specialists: any[]
  subspecialists: any[]
  units: any[]
  parents: any[]
  values: any
  isLoading?: boolean
  isReadonly?: boolean
}

const props = defineProps<Props>()
const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const emit = defineEmits<{
  'update:selected-unit': [val: any]
  'update:selected-specialist': [val: any]
  submit: [values: InfraFormData, resetForm: () => void]
  cancel: [resetForm: () => void]
}>()

const { defineField, errors, meta } = useForm({
  validationSchema: toTypedSchema(props.schema),
  initialValues: {
    code: '',
    name: '',
    infraGroup_code: infraGroupCodesKeys.room,
    parent_id: null,
    specialist_id: 0,
    subspecialist_id: 0,
    unit_id: 0,
  } as Partial<InfraFormData>,
})

const [code, codeAttrs] = defineField('code')
const [name, nameAttrs] = defineField('name')
const [infraGroup_code] = defineField('infraGroup_code')
const [specialist_id, specialistAttrs] = defineField('specialist_id')
const [subspecialist_id, subspecialistAttrs] = defineField('subspecialist_id')
const [unit_id, unitAttrs] = defineField('unit_id')
const [parent_id, parentAttrs] = defineField('parent_id')

if (props.values) {
  if (props.values.code !== undefined) code.value = props.values.code
  if (props.values.name !== undefined) name.value = props.values.name
  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
  if (props.values.specialist_id !== undefined)
    specialist_id.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
  if (props.values.subspecialist_id !== undefined)
    subspecialist_id.value = props.values.subspecialist_id ? Number(props.values.subspecialist_id) : null
  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? Number(props.values.unit_id) : null
  if (props.values.parent_id !== undefined)
    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
}

const resetForm = () => {
  code.value = ''
  name.value = ''
  infraGroup_code.value = infraGroupCodesKeys.room
  specialist_id.value = 0
  subspecialist_id.value = 0
  unit_id.value = 0
  parent_id.value = null
}

function onSubmitForm() {
  const formData: InfraFormData = {
    code: code.value || '',
    name: name.value || '',
    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.room,
    specialist_id: specialist_id.value || 0,
    subspecialist_id: subspecialist_id.value || 0,
    unit_id: unit_id.value || 0,
    parent_id: parent_id.value ? Number(parent_id.value) : null,
  }
  emit('submit', formData, resetForm)
}

function onCancelForm() {
  emit('cancel', resetForm)
}
</script>

<template>
  <form
    id="form-building"
    @submit.prevent
  >
    <Block
      labelSize="thin"
      class="!mb-2.5 !pt-0 xl:!mb-3"
      :colCount="1"
    >
      <Cell>
        <Label height="compact">Kode</Label>
        <Field :errMessage="errors.code">
          <Input
            id="code"
            v-model="code"
            v-bind="codeAttrs"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Nama</Label>
        <Field :errMessage="errors.name">
          <Input
            id="name"
            v-model="name"
            v-bind="nameAttrs"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Lantai</Label>
        <Field :errMessage="errors.parent_id">
          <Combobox
            id="parent"
            v-model="parent_id"
            v-bind="parentAttrs"
            :items="parents"
            :is-disabled="isLoading || isReadonly"
            placeholder="Pilih Lantai"
            search-placeholder="Cari Lantai"
            empty-message="Lantai tidak ditemukan"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Unit</Label>
        <Field :errMessage="errors.unit_id">
          <Combobox
            id="unit"
            v-model="unit_id"
            v-bind="unitAttrs"
            :items="units"
            :is-disabled="isLoading || isReadonly"
            placeholder="Pilih Unit"
            search-placeholder="Cari Unit"
            empty-message="Unit tidak ditemukan"
            @update:model-value="$emit('update:selected-unit', $event)"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Spesialis</Label>
        <Field :errMessage="errors.specialist_id">
          <Combobox
            id="specialist"
            v-model="specialist_id"
            v-bind="specialistAttrs"
            :items="specialists"
            :is-disabled="isLoading || isReadonly"
            placeholder="Pilih Spesialis"
            search-placeholder="Cari spesialis"
            empty-message="Spesialis tidak ditemukan"
            @update:model-value="$emit('update:selected-specialist', $event)"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Sub Spesialis</Label>
        <Field :errMessage="errors.subspecialist_id">
          <Combobox
            id="subspecialist"
            v-model="subspecialist_id"
            v-bind="subspecialistAttrs"
            :items="subspecialists"
            :is-disabled="isLoading || isReadonly"
            placeholder="Pilih Sub Spesialis"
            search-placeholder="Cari sub spesialis"
            empty-message="Sub Spesialis tidak ditemukan"
          />
        </Field>
      </Cell>
    </Block>
    <div class="my-2 flex justify-end gap-2 py-2">
      <Button
        type="button"
        variant="secondary"
        class="w-[120px]"
        @click="onCancelForm"
      >
        Kembali
      </Button>
      <Button
        v-if="!isReadonly"
        type="button"
        class="w-[120px]"
        :disabled="isLoading || !meta.valid"
        @click="onSubmitForm"
      >
        Simpan
      </Button>
    </div>
  </form>
</template>
