<script setup lang="ts">
import { cn } from '~/lib/utils'

// type
import type { Doctor } from '~/models/doctor'
import { type Person, parseName } from '~/models/person'

// componenets
import * as DE from '~/components/pub/my-ui/doc-entry'
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'

const props = defineProps<{
  fieldName: string
  label: string
  placeholder: string
  doctors?: Doctor[]
  class?: string
  selectClass?: string
  fieldGroupClass?: string
  labelClass?: string
  isRequired?: boolean
  isDisabled?: boolean
  colSpan?: number
}>()

const { class: containerClass, labelClass, colSpan = 1, doctors = [] } = props

const opts = computed(() => {
  return doctors.map((doc) => ({
    value: doc.id,
    label: parseName(doc.employee.person as Person),
  }))
})
</script>

<template>
  <DE.Cell
    :col-span="colSpan"
    :class="cn('select-field-group', fieldGroupClass, containerClass)"
  >
    <DE.Label
      :label-for="fieldName"
      :is-required="isRequired"
    >
      {{ label }}
    </DE.Label>
    <DE.Field
      :id="fieldName"
      :class="cn('select-field-wrapper')"
    >
      <FormField
        v-slot="{ componentField }"
        :name="fieldName"
      >
        <FormItem>
          <FormControl>
            <Combobox
              :id="fieldName"
              v-bind="componentField"
              :items="opts"
              :placeholder="placeholder"
              :is-disabled="isDisabled"
              search-placeholder="Cari dokter..."
              empty-message="Dokter tidak ditemukan"
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </DE.Field>
  </DE.Cell>
</template>
