<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'
import FileIcon from '@/components/FileIcon.vue'
import type { QTableProps } from 'quasar'

defineProps<{
  viewMode: 'view_list' | 'view_module'
}>()

const { foundFile } = storeToRefs(useSearchDataStore())
const { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore()
const columns: QTableProps['columns'] = [
  {
    name: 'name',
    required: true,
    label: 'ชื่อไฟล์',
    align: 'left',
    field: (row) => row.fileName,
    format: (val) => `${val}`,
    sortable: true,
    style: 'width: 200px',
  },
  {
    name: 'title',
    align: 'center',
    label: 'ชื่อเรื่อง',
    field: 'title',
    style: 'width: 200px',
    sortable: true,
  },
  {
    name: 'fileType',
    align: 'center',
    label: 'ประเภทของไฟล์',
    field: 'fileType',
    sortable: true,
    style: 'width: 200px',
  },
  {
    name: 'actions',
    align: 'center',
    label: '',
    field: '',
    style: 'width: 20px',
  },
]
</script>

<template>
  <div v-if="viewMode === 'view_list' && foundFile.length > 0">
    <div class="grid q-mt-md">
      <div v-for="(value, index) in foundFile" :key="value.title">
        <div
          :style="{
            position: 'relative',
            display: 'flex',
            gap: '0.5rem',
            flexDirection: 'column',
            alignItems: 'center',
            padding: '1rem',
            maxWidth: '100%',
          }"
          class="box"
          @click="() => getFileInfo(foundFile[index])"
        >
          <div class="q-px-md flex items-center justify-center">
            <file-icon
              size="preview"
              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
            />
          </div>
          <div
            class="text-overflow-handle block q-px-md text-center"
            style="max-width: 100%"
          >
            {{ getFileNameFormat(value.fileName) }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div v-if="viewMode === 'view_module' && foundFile.length > 0">
    <q-table
      flat
      bordered
      :rows="foundFile"
      :columns="columns"
      row-key="name"
      hide-bottom
      :rows-per-page-options="[0]"
      class="cursor"
    >
      <template v-slot:body-cell-name="nameData">
        <q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
          <file-icon size="list" :fileMimeType="nameData.row.fileType" />
          {{ nameData.row.fileName }}
        </q-td>
      </template>

      <template v-slot:body-cell-fileType="typeData">
        <q-td>
          <div class="justify-center">
            {{ getType(typeData.row.fileType) }}
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-actions="sizeData">
        <q-td class="justify-center">
          <div>
            <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
            <q-tooltip
              anchor="center left"
              self="center right"
              :offset="[5, 1]"
            >
              {{ getSize(sizeData.row.fileSize) }}
            </q-tooltip>
          </div>
        </q-td>
      </template>
    </q-table>
  </div>

  <div class="q-mt-md" v-if="foundFile.length == 0">
    <span>ไม่พบรายการที่ค้นหา</span>
  </div>
</template>

<style scoped lang="scss">
.box {
  border: 2px solid $separator-color;
  border-radius: 8px;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.text-overflow-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: $breakpoint-md-min) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid .box {
  position: relative;
}
</style>
