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

import * as DE from '~/components/pub/my-ui/doc-entry'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { Label as RadioLabel } from '~/components/pub/ui/label'
import { Input } from '~/components/pub/ui/input'

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

const { class: containerClass, radioGroupClass, radioItemClass, labelClass } = props

const opts = [
  { label: 'PRC', value: 'prc' },
  { label: 'WB', value: 'wb' },
  { label: 'FFP', value: 'ffp' },
  { label: 'TC', value: 'tc' },
]
</script>

<template>
  <DE.Cell
    :class="cn('radio-group-field', containerClass)"
    :col-span="2"
  >
    <DE.Label :label-for="fieldName">
      {{ label }}
    </DE.Label>
    <DE.Field :id="fieldName">
      <FormField
        v-slot="{ componentField: radioField }"
        :name="`${fieldName}.type`"
      >
        <FormItem>
          <FormControl>
            <RadioGroup
              :model-value="radioField.modelValue"
              @update:model-value="radioField.onChange"
              :class="cn('grid grid-cols-1 items-start gap-4 sm:grid-cols-2 ', radioGroupClass)"
            >
              <div
                v-for="(option, index) in opts"
                :key="option.value"
                :class="cn('grid grid-cols-1 items-start gap-3 sm:grid-cols-[auto,1fr]', radioItemClass)"
              >
                <div class="flex min-w-fit items-center gap-2">
                  <RadioGroupItem
                    :id="`type-${index}`"
                    :value="option.value"
                    :disabled="isDisabled"
                  />
                  <RadioLabel :for="`type-${index}`">
                    {{ option.label }}
                  </RadioLabel>
                </div>

                <FormField
                  v-slot="{ componentField: amountField }"
                  :name="`${fieldName}.amount.${option.value}`"
                >
                  <FormItem>
                    <FormControl>
                      <div class="relative w-[140px]">
                        <Input
                          v-bind="amountField"
                          placeholder="00"
                          class="pr-10"
                          :disabled="radioField.modelValue !== option.value || isDisabled"
                          @input="
                            (e: InputEvent) => {
                              const target = e.target as HTMLInputElement
                              const v = target.value.replace(/\D/g, '')
                              amountField.onChange(v)
                            }
                          "
                        />
                        <span
                          class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-sm text-muted-foreground"
                        >
                          CC
                        </span>
                      </div>
                    </FormControl>
                  </FormItem>
                </FormField>
              </div>
            </RadioGroup>
          </FormControl>
        </FormItem>
      </FormField>
    </DE.Field>
  </DE.Cell>
</template>
