<template>
  <div class="space-y-2 my-8">
    <label :for="`file-${index}`" class="inline-block mb-2 font-bold">
      파일 업로드 {{ index + 1 }}
    </label>
    <button type="button" @click="onAdd">
      <font-awesome-icon
        v-if="index === length - 1"
        :icon="['fas', 'plus']"
        class="text-blue-600 text-sm mt-1 ml-3"
      />
    </button>
    <button
      v-if="index > 0"
      type="button"
      class="text-red-600 text-sm mt-1 ml-3 underline"
      @click="handleRemove"
    >
      <font-awesome-icon :icon="['fas', 'xmark']" style="color: #ff0000" />
    </button>

    <div
      v-if="file.uploadState"
      class="flex cursor-pointer"
      @click="() => onClear(file, `file-${index}`)"
    >
      <div class="mx-5">{{ file.displayedName }}</div>
      <div class="flex items-center">
        <font-awesome-icon class="px-2" :icon="['fas', 'trash']" />
        <div>삭제하기</div>
      </div>
    </div>

    <input
      :id="`file-${index}`"
      type="file"
      class="block w-full py-1.5 px-3"
      @change="(e) => onChange(e, file)"
    />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  index: number
  file: any
  length: number
  onChange: (e: Event, file: any) => void
  onClear: (file: any, id: string) => void
  onAdd: () => void
}>()

const emit = defineEmits(['remove'])

const handleRemove = () => {
  emit('remove')
}
</script>
