<template>
  <AisListGroup class="text-sm ">
    <AisListGroupItem v-for="file in files">
      <div class="flex z-40 flex justify-between items-center">
        <div class="flex text-sm items-center gap-2">
          <AisIcon :class="computeFileIconStyle" :icon="determineFileIcon(file.type)"></AisIcon>
          {{file.name}}
          <label>({{getFileSize(file,false)}})</label>
        </div>
        <AisIcon class="cursor-pointer text-danger" @click="remove(file)" icon="cancel"></AisIcon>
      </div>
    </AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
import AisListGroup from "@/components/list-group/AisListGroup.vue";
import AisListGroupItem from "@/components/list-group/AisListGroupItem.vue";
import AisIcon from "@/components/icon/AisIcon.vue";
import {getFileSize} from "@/components/fileupload/fileupload-util.js";
import {getTextVariant} from "@/util/variants-util";
import {computed} from "vue";

const emit = defineEmits(["remove"])

const props = defineProps({
  files: {type: Array, required: true},
  showFileSize: {type: Boolean, default: false},
  variant: {type: String, default: 'primary'}
})

function determineFileIcon(type) {
  switch(type){
    case 'application/pdf':
      return 'file-pdf';
    case 'text/csv':
      return 'file-csv';
    case 'application/vnd.ms-excel':
    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
      return 'file-excel';
    case 'application/msword':
    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' :
      return 'file-word';
    case 'application/vnd.ms-powerpoint':
    case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
      return 'file-powerpoint'
  }
  if(type.includes('image')){
    return 'file-image'
  }else if(type.includes('video')){
    return 'file-video'
  }
  return "file"
}

function remove(file) {
  emit("remove",file)
}

const computeFileIconStyle = computed(() => {
  return getTextVariant(props.variant)
})



</script>