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

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
}>()

const {
  fieldName = 'job',
  label,
  placeholder,
  errors,
  class: containerClass,
  fieldGroupClass,
  labelClass,
} = props

const arrangementTypeOpts = [
  { label: 'KRS', value: "krs" },
  { label: 'MRS', value: "mrs" },
  { label: 'Rujuk Internal', value: "rujukInternal" },
  { label: 'Rujuk External', value: "rujukExternal" },
  { label: 'Meninggal', value: "meninggal" },
]
</script>

<template>
  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
    <DE.Label
      v-show="label"
      :label-for="fieldName"
      :class="cn('select-field-label', labelClass)"
      :is-required="isRequired"
    >
      {{ label }}
    </DE.Label>
    <DE.Field
      :id="fieldName"
      :errors="errors"
      :class="cn('select-field-wrapper')"
    >
        <FormField :name="fieldName" v-slot="{ componentField, value }">
          <FormItem>
            <FormControl>
              <Select 
                v-bind="componentField" 
                :model-value="value"
                :items="arrangementTypeOpts"
                :defaultValue='arrangementTypeOpts[0]?.value' 
              />
            </FormControl>            
            <FormMessage />
          </FormItem>
        </FormField>
    </DE.Field>
  </DE.Cell>
</template>
