<script setup lang="ts">
import type { QTableProps } from 'quasar'
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'

import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'
import useStorage from '@/stores/storage'

import DialogDelete from './DialogDelete.vue'
import FileFormWrapper from './FileFormWrapper.vue'
import FileItemAction from '@/components/FileItemAction.vue'
import FileIcon from '@/components/FileIcon.vue'

const props = withDefaults(
  defineProps<{
    action: boolean
    viewMode: 'view_list' | 'view_module'
  }>(),
  {
    action: false,
  },
)
const { foundFile, isActFoundFile } = storeToRefs(useSearchDataStore())
const { getFileInfo, getSize, getType } = useFileInfoStore()

const storageStore = useStorage()
const { deleteFile } = storageStore

const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()

const keywordList = ref<string[]>([])
const categoryList = ref<string[]>([])
const selectKeyword = ref<string[]>([])
const selectCategory = ref<string[]>([])
const filterFoundFile = ref<any>()

const deleteFormType = ref<'deleteFile'>('deleteFile')
const dialogDeleteState = ref<boolean>(false)
const deleteFormPath = ref<string>('')

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',
  },
]

function triggerFileDelete(pathname: string) {
  deleteFormType.value = 'deleteFile'
  deleteFormPath.value = pathname
  dialogDeleteState.value = !dialogDeleteState.value
}

function confirmDelete() {
  if (deleteFormType) {
    deleteFile(deleteFormPath.value)

    setTimeout(() => {
      isActFoundFile.value = true
    }, 1000)
  }
}

function filterSearch() {
  keywordList.value = []
  categoryList.value = []
  foundFile.value.forEach((obj) => {
    obj.keyword.forEach((keyword) => {
      if (!keywordList.value.includes(keyword)) {
        keywordList.value.push(keyword)
      }
    })
    obj.category.forEach((category) => {
      if (!categoryList.value.includes(category)) {
        categoryList.value.push(category)
      }
    })
  })

  if (!(selectKeyword.value.length || selectCategory.value.length)) {
    filterFoundFile.value = foundFile.value
  } else {
    filterFoundFile.value = foundFile.value.filter(
      (entry) =>
        entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
        entry.category.some((kw) => selectCategory.value.includes(kw)),
    )
  }
}

watch(
  [
    () => foundFile.value,
    () => selectKeyword.value,
    () => selectCategory.value,
  ],
  filterSearch,
)

onMounted(() => {
  filterSearch()
})
</script>

<template>
  <file-form-wrapper ref="fileFormComponent" />
  <dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />

  <div class="row grid q-py-md q-gutter-sm">
    <q-select
      outlined
      dense
      multiple
      use-chips
      v-model="selectKeyword"
      :options="keywordList"
      style="width: 100%"
      label="คำสำคัญ"
      class="custom-selection"
    />
    <q-select
      outlined
      dense
      multiple
      use-chips
      v-model="selectCategory"
      :options="categoryList"
      style="width: 100%"
      label="กลุ่ม/หมวดหมู่"
    />
  </div>

  <div v-if="props.viewMode === 'view_list' && foundFile.length > 0">
    <div class="grid q-mt-md">
      <div v-for="(value, index) in filterFoundFile" :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])"
          :id="`getFileInfoFileSearched${index}`"
        >
          <div class="q-px-md flex items-center justify-center">
            <file-icon
              size="preview"
              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
              :fileName="value.fileName ? value.fileName : 'unknow'"
            />
          </div>
          <div
            class="absolute"
            style="top: 0.5rem; right: 0.5rem"
            v-if="props.action"
          >
            <file-item-action
              :nameId="value.pathname"
              @edit="
                () =>
                  fileFormComponent?.triggerFileEdit(
                    {
                      title: value.title,
                      description: value.description,
                      keyword: value.keyword,
                      category: value.category,
                    },
                    value.pathname,
                  )
              "
              @delete="() => triggerFileDelete(value.pathname)"
            />
          </div>
          <div
            class="text-overflow-handle block q-px-md text-center"
            style="max-width: 100%"
          >
            {{ value.title }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    v-if="props.viewMode === 'view_module' && foundFile.length > 0"
    class="q-gutter-sm"
  >
    <q-table
      flat
      bordered
      :rows="filterFoundFile"
      :columns="columns"
      row-key="name"
      :pagination="{
        rowsPerPage: 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.fileType : 'unknow'
            "
            :fileName="nameData.row.fileName ? nameData.row.fileName : 'unknow'"
          />
          {{ nameData.row.fileName }}
        </q-td>
      </template>

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

      <template v-slot:body-cell-actions="actionData">
        <q-td class="justify-center">
          <div>
            <q-icon class="q-ma-sm" name="o_info" size="2em" color="primary" />
            <q-tooltip
              anchor="center left"
              self="center right"
              :offset="[5, 1]"
            >
              {{ getSize(actionData.row.fileSize) }}
            </q-tooltip>
          </div>
          <div v-if="props.action">
            <q-btn
              flat
              color="positive"
              dense
              icon="o_edit"
              @click="
                () =>
                  fileFormComponent?.triggerFileEdit(
                    actionData.row,
                    actionData.row.pathname,
                  )
              "
              id="listViewFileEdit"
            />
            <q-btn
              flat
              color="negative"
              dense
              icon="mdi-trash-can-outline"
              @click="() => triggerFileDelete(actionData.row.pathname)"
              id="listViewFileDelete"
            />
          </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;
}

.justify-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
