<script setup lang="ts">
import type { FormErrors } from '~/types/error'
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 { cn } from '~/lib/utils'

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 = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass, labelClass } = props

const contactOptions = [
  { label: 'Nomor HP', value: 'phoneNumber' },
  { label: 'Nomor Telepon Kantor', value: 'officePhoneNumber' },
  { label: 'Nomor Telepon Rumah', value: 'homePhoneNumber' },
]
</script>

<template>
  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
    <Label
      :label-for="fieldName"
      :class="cn('select-field-label', labelClass)"
      :is-required="isRequired && !isDisabled"
    >
      {{ label }}
    </Label>
    <Field
      :id="fieldName"
      :errors="errors"
      :class="cn('select-field-wrapper')"
    >
      <FormField
        v-slot="{ componentField }"
        :name="fieldName"
      >
        <FormItem>
          <FormControl>
            <Select
              :id="fieldName"
              v-bind="componentField"
              :is-disabled="isDisabled"
              :items="contactOptions"
              :placeholder="placeholder || 'Pilih jenis kontak'"
              :preserve-order="true"
              :class="
                cn(
                  'min-w-[190px] text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
                  selectClass,
                )
              "
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </Field>
  </FieldGroup>
</template>
