<script setup lang="ts">
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'

const data = ref({
  name: '',
  password: '',
  status: '',
  type: 'doctor',
})

function onClick(type: string) {
  if (type === 'cancel') {
    navigateTo('/human-src/employee')
  } else if (type === 'draft') {
    // do something
  } else if (type === 'submit') {
    // do something
  }
}

const items = [
  { value: 'doctor', label: 'Dokter' },
  { value: 'nurse', label: 'Perawat' },
  { value: 'nutritionist', label: 'Ahli Gizi' },
  { value: 'laborant', label: 'Laboran' },
  { value: 'pharmacy', label: 'Farmasi' },
  { value: 'payment', label: 'Pembayaran' },
  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
  { value: 'management', label: 'Management' },
]
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
    <Icon name="i-lucide-user" class="me-2" />
    <span class="font-semibold">Tambah</span> Karyawan
  </div>

  <AppEmployeeEntryForm v-model="data" :items="items" />

  <AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
  <AppPersonAddressEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
  <AppPersonContactEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
  <AppPersonRelativeEntryForm v-model="data" :items="items" :schema="MaterialSchema" />

  <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
  <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
  <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
  <AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
  <AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />

  <AppUserEntryForm v-model="data" />
  <div class="my-2 flex justify-end py-2">
    <Action @click="onClick" />
  </div>
</template>
