<template>
  <div class="ivyforms-field__file-upload">
    <IvyFormItem
      :label="hideLabel ? '' : label"
      :required="required"
      :label-position="labelPosition"
    >
      <IvyFileUploadDropzone
        :variant="uploadVariant"
        tone="brand"
        disabled
        :drag-prefix="dragPrefixPreview"
        :hint-text="hintPreview"
        :choose-label="uploadChooseLabel"
      />
    </IvyFormItem>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useFormBuilder } from '@/stores/useFormBuilder'
import { useLabels } from '@/composables/useLabels'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'
import IvyFileUploadDropzone from '@/views/_components/file-upload/IvyFileUploadDropzone.vue'
import {
  resolveFileUploadChooseLabel,
  resolveFileUploadVariant,
} from '@/utils/fileUploadValidation'

const props = defineProps<{ fieldIndex: number }>()
const formBuilderStore = useFormBuilder()
const { getLabel } = useLabels()

const field = computed(() => formBuilderStore.getFieldByIndex(props.fieldIndex))

const fieldRecord = computed(() => (field.value ?? {}) as Record<string, unknown>)

const uploadVariant = computed(() => resolveFileUploadVariant(fieldRecord.value))

const uploadChooseLabel = computed(() =>
  resolveFileUploadChooseLabel(fieldRecord.value, getLabel('file_upload_choose_files')),
)

const label = computed(() => field.value?.label || '')
const required = computed(() => field.value?.required || false)
const hideLabel = computed(() => field.value?.hideLabel || false)
const labelPosition = computed(() =>
  field.value?.labelPosition === 'default' ? 'top' : field.value?.labelPosition || 'top',
)

const dragPrefixPreview = computed(() => {
  const p = field.value?.placeholder
  const t = typeof p === 'string' ? p.trim() : ''
  return t !== '' ? t : getLabel('file_upload_placeholder_drag_here')
})

const hintPreview = computed(() => {
  const d = field.value?.description
  return typeof d === 'string' ? d.trim() : ''
})
</script>

<style scoped lang="scss">
.ivyforms-field__file-upload {
  cursor: default;
  :deep(.ivyforms-form-item) {
    cursor: default;
    margin-bottom: 0;
  }
}
</style>
