<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
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 Select from '~/components/pub/my-ui/form/select.vue'
import { Form } from '~/components/pub/ui/form'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
import { cn } from '~/lib/utils'
import SelectDateRange from './_common/select-date-range.vue'

interface InstallationFormData {
  name: string
  code: string
  encounterClassCode: string
}

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

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

const formSchema = toTypedSchema(props.schema)

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

// Form cancel handler
function onResetForm({ resetForm }: { resetForm: () => void }) {
  emit('reset', resetForm)
}

const items = ref([
  { label: 'Rujukan Internal', value: 'ri' },
  { label: 'SEP Rujukan', value: 'sr' },
])
</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-7 text-lg xl:text-xl">
        <div class="flex flex-col justify-between">
          <SelectDateRange
            field-name="releaseDate"
            label="Tanggal Penerbitan"
            placeholder="Tanggal Penerbitan"
            :errors="errors"
            is-required
          />
          <SelectDateRange
            field-name="controlPlanDate"
            label="Tanggal Rencana Kontrol"
            placeholder="Tanggal Rencana Kontrol"
            :errors="errors"
            is-required
          />
          <InputBase
            field-name="patientName"
            label="Nama Pasien"
            placeholder="Nama Pasien"
          />
          <InputBase
            field-name="cardNumber"
            label="Nomor Kartu"
            placeholder="Nomor Kartu"
          />
          <InputBase
            field-name="sepNumber"
            label="Nomor SEP"
            placeholder="Nomor SEP"
          />
          <SelectOriginPolyclinic
            field-name="originPolyclinic"
            label="Poliklinik Asal"
            placeholder="Pilih Poliklinik Asal"
            :errors="errors"
            is-required
          />
          <SelectDestinationPolyclinic
            field-name="destinationPolyclinic"
            label="Poliklinik Tujuan"
            placeholder="Pilih Poliklinik Tujuan"
            :errors="errors"
            is-required
          />
        </div>
      </div>
     
      <div class="my-2 flex items-center gap-3 justify-end">
        <Button @click="onResetForm" variant="secondary">Reset</Button>
        <Button @click="onSubmitForm">Terapkan</Button>
      </div>
    </form>
  </Form>
</template>
