<template>
  <div class="h-full flex items-start justify-center">
    <div class="relative w-full">
      <!-- Remove Button -->
      <RemoveButton
        v-if="removable"
        class="absolute z-20 top-[-10px] right-[-9px]"
        @click.stop="handleRemoveClick"
        v-tooltip="__('Remove')"
        :dusk="$attrs.dusk"
      />

      <div
        class="bg-gray-50 dark:bg-gray-700 relative aspect-square flex items-center justify-center border-2 border-gray-200 dark:border-gray-700 overflow-hidden rounded-lg"
      >
        <!-- Upload Overlay -->
        <div
          v-if="file.processing"
          class="absolute inset-0 flex items-center justify-center"
        >
          <ProgressBar
            :title="uploadingLabel"
            class="mx-4"
            color="bg-green-500"
            :value="uploadingPercentage"
          />
          <div class="bg-primary-900 opacity-5 absolute inset-0" />
        </div>

        <!-- Image Preview -->
        <img
          v-if="isImage"
          :src="previewUrl"
          class="aspect-square object-scale-down"
        />
        <div v-else>
          <div class="rounded bg-gray-200 border-2 border-gray-200 p-4">
            <Icon type="document-text" width="50" height="50" />
          </div>
        </div>
      </div>

      <!-- File Information -->
      <p class="font-semibold text-xs mt-1">{{ file.name }}</p>
    </div>
  </div>
</template>

<script setup>
import { useFilePreviews } from '@/composables/useFilePreviews'
import { useLocalization } from '@/composables/useLocalization'
import { computed, toRef } from 'vue'

const { __ } = useLocalization()
const emit = defineEmits(['removed'])
const props = defineProps({
  file: { type: Object },
  removable: { type: Boolean, default: true },
})

const uploadingLabel = computed(() => {
  if (props.file.processing) {
    return __('Uploading') + ' (' + props.file.progress + '%)'
  }

  return props.file.name
})

const uploadingPercentage = computed(() => {
  if (props.file.processing) {
    return props.file.progress
  }

  return 100
})

const { previewUrl, isImage } = useFilePreviews(toRef(props, 'file'))

const handleRemoveClick = () => emit('removed')
</script>

<script>
export default {
  inheritAttrs: false,
}
</script>
