<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 { Input } from '~/components/pub/ui/input'
import { cn } from '~/lib/utils'

defineProps<{
  fieldName: string
  placeholder: string
  label: string
  errors?: FormErrors
  class?: string
  numericOnly?: boolean
  maxLength?: number
  isRequired?: boolean
}>()
</script>

<template>
  <FieldGroup>
    <Label
      :label-for="fieldName"
      :is-required="isRequired"
    >
      {{ label }}
    </Label>
    <Field
      :id="fieldName"
      :errors="errors"
    >
      <FormField
        v-slot="{ componentField }"
        :name="fieldName"
      >
        <FormItem>
          <FormControl>
            <Input
              v-bind="componentField"
              type="file"
              :placeholder="placeholder"
              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
              @change="
                (e: Event) => {
                  const file = (e.target as HTMLInputElement).files?.[0] || null
                  componentField.onChange(file)
                }
              "
              @blur.prevent
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </Field>
  </FieldGroup>
</template>
