<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'

import * as DE from '~/components/pub/my-ui/doc-entry'

const props = defineProps<{
  fieldName: string
  label?: string
  placeholder?: string
  hint?: string
  modelValue?: File | null
  accept?: string[]
  maxSizeMb?: number
  errors?: FormErrors
  class?: string
  isRequired?: boolean
  isDisabled?: boolean
  icons?: string
}>()

const hintMsg = computed(() => {
  if (props.hint) return props.hint
  if (props.accept) {
    return `${props.accept.map((ext) => '.' + ext.replace(/^\./, '')).join(', ')}, maksimal ${props.maxSizeMb} MB`
  }
  return 'Gunakan file yang sesuai'
})

async function onFileChange(event: Event, handleChange: (value: any) => void) {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]

  handleChange(file)
}
</script>

<template>
  <DE.Cell>
    <DE.Label
      v-if="label !== ''"
      :label-for="fieldName"
      :is-required="isRequired && !isDisabled"
    >
      {{ label }} ({{ hintMsg }})
    </DE.Label>
    <DE.Field
      :id="fieldName"
      :errors="errors"
    >
      <FormField
        v-slot="{ componentField, handleChange }"
        :name="fieldName"
      >
        <FormItem>
          <FormControl class="flex flex-col">
            <Input
              @change="onFileChange($event, handleChange)"
              type="file"
              :disabled="isDisabled"
              v-bind="componentField"
              :placeholder="placeholder"
              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </DE.Field>
  </DE.Cell>
</template>
