<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 { Label as RadioLabel } from '~/components/pub/ui/label'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { cn } from '~/lib/utils'

const props = defineProps<{
  fieldName?: string
  label?: string
  errors?: FormErrors
  class?: string
  radioGroupClass?: string
  radioItemClass?: string
  labelClass?: string
  isRequired?: boolean
}>()

const {
  fieldName = 'residenceStatus',
  label = 'Apakah alamat KTP sama dengan alamat sekarang?',
  errors,
  class: containerClass,
  radioGroupClass,
  radioItemClass,
  labelClass,
} = props

const residenceOptions = [
  { label: 'Ya', value: '1' },
  { label: 'Tidak', value: '0' },
]
</script>

<template>
  <FieldGroup :class="cn('radio-group-field', containerClass)">
    <Label
      size="fit"
      height="compact"
      :label-for="fieldName"
      :is-required="isRequired"
    >
      {{ label }}
    </Label>
    <Field
      :id="fieldName"
      :errors="errors"
    >
      <FormField
        v-slot="{ componentField }"
        :name="fieldName"
      >
        <FormItem>
          <FormControl>
            <RadioGroup
              v-bind="componentField"
              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
            >
              <div
                v-for="(option, index) in residenceOptions"
                :key="option.value"
                :class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
              >
                <RadioGroupItem
                  :id="`${fieldName}-${index}`"
                  :value="option.value"
                  :class="
                    cn(
                      'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
                      containerClass,
                    )
                  "
                />
                <RadioLabel
                  :for="`${fieldName}-${index}`"
                  :class="
                    cn(
                      'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
                      labelClass,
                    )
                  "
                >
                  {{ option.label }}
                </RadioLabel>
              </div>
            </RadioGroup>
          </FormControl>
          <FormMessage class="ml-0 mt-1" />
        </FormItem>
      </FormField>
    </Field>
  </FieldGroup>
</template>
