<script setup>
import {formatFileSize, imageUrl} from "../utils.js";

const props = defineProps({
  file: Object,
  selectable: {
    type: Boolean,
    default: false,
  },
  selected: {
    type: Boolean,
    default: false,
  },
})

const determineAction = () => {
  if (props.selectable) {
    emit('selectFile', props.file)
  } else {
    emit('showInformation', props.file)
  }
}

const emit = defineEmits(['showInformation', 'selectFile'])
</script>

<template>
  <div class="group relative cursor-pointer h-full" @click.prevent="determineAction">

    <div class="relative rounded-lg overflow-hidden border aspect-square flex items-center justify-center">
      <div v-if="selected" class="absolute z-10 inset-0 bg-black bg-opacity-25 flex items-center justify-center w-full h-full z-10">
        <svg class="w-10 h-10 text-white" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
        </svg>
      </div>
      <div v-else class="absolute inset-0 bg-black bg-opacity-25 opacity-0 group-hover:opacity-100 transition"></div>
      <img class="aspect-square rounded-lg object-contain" :src="imageUrl(file, 'thumbnail')" alt="">
    </div>

    <div class="mt-2">
      <h3 class="text-gray-600 mb-0 text-sm truncate">{{ file.name }}</h3>
      <p class="text-gray-400 mt-0 text-xs">{{ formatFileSize(file.size) }}</p>
    </div>
  </div>
</template>
