<script setup lang="ts">
import { useFileInfoStore } from '@/stores/file-info-data'
import mime from 'mime'

const { mimeFileMapping } = useFileInfoStore()

defineProps<{
  fileMimeType: string | undefined
  fileName: string | undefined
  size: string
}>()

function getIcon(mimeType: string | undefined, fileName: string | undefined) {
  if (mimeType === undefined) {
    return 'mdi-file-question-outline'
  }

  const extFomMime = mime.getExtension(mimeType)
  if (extFomMime) {
    return mimeFileMapping[mimeType].icon
  }
  if (fileName && fileName.includes('.')) {
    return 'mdi-file-outline'
  }
  return 'mdi-file-question-outline'
}

function getColor(mimeType: string | undefined, fileName: string | undefined) {
  if (mimeType === undefined) {
    return 'grey-5'
  }

  const extFomMime = mime.getExtension(mimeType)
  if (extFomMime) {
    return mimeFileMapping[mimeType].color
  }
  if (fileName && fileName.includes('.')) {
    return 'blue-11'
  }
  return 'grey-5'
}

function getIconSize(s: string) {
  type SizeMapping = {
    [key: string]: string
  }
  const sizeMapping: SizeMapping = {
    preview: '6em',
    list: '2em',
  }
  return sizeMapping[s]
}
</script>

<template>
  <q-icon
    :name="fileMimeType && getIcon(fileMimeType, fileName)"
    :color="fileMimeType && getColor(fileMimeType, fileName)"
    :size="getIconSize(size)"
  />
</template>
