<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
import { cn } from '~/lib/utils'

import * as DE from '~/components/pub/my-ui/doc-entry'

const props = defineProps<{
  fieldName?: string
  label?: string
  placeholder?: string
  errors?: FormErrors
  class?: string
  selectClass?: string
  fieldGroupClass?: string
  labelClass?: string
  isRequired?: boolean
  isDisabled?: boolean
}>()

const {
  fieldName = 'ethnicity',
  label = 'Suku',
  placeholder = 'Pilih suku',
  errors,
  class: containerClass,
  fieldGroupClass,
  labelClass,
} = props

const ethnicOptions = [
  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
  { label: 'Jawa', value: 'jawa' },
  { label: 'Sunda', value: 'sunda' },
  { label: 'Batak', value: 'batak' },
  { label: 'Betawi', value: 'betawi' },
  { label: 'Minangkabau', value: 'minangkabau' },
  { label: 'Bugis', value: 'bugis' },
  { label: 'Madura', value: 'madura' },
  { label: 'Banjar', value: 'banjar' },
  { label: 'Bali', value: 'bali' },
  { label: 'Dayak', value: 'dayak' },
  { label: 'Aceh', value: 'aceh' },
  { label: 'Sasak', value: 'sasak' },
  { label: 'Papua', value: 'papua' },
  { label: 'Lainnya', value: 'lainnya', priority: -100 },
]
</script>

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