<script setup lang="ts">
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'

import FileIcon from '@/components/FileIcon.vue'
import FileItemAction from '@/components/FileItemAction.vue'
import FromEdit from '@/components/FromEdit.vue'
import { useTreeDataStore } from '@/stores/tree-data'
import { useFileInfoStore } from '@/stores/file-info-data'

const { isPreview } = storeToRefs(useFileInfoStore())
const { getFileInfo } = useFileInfoStore()
const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']

const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
  useTreeDataStore()
)
const { getFolder, createFolder, editFolder, uploadFile } = useTreeDataStore()

const drawer = ref<boolean>(false)
const drawerFile = ref<boolean>(false)
const drawerStatus = ref<'edit' | 'create'>('create')
const inputFile = ref<File>()
const fileTitle = ref<string>('')
const fileDesc = ref<string>('')
const fileCategory = ref<string>('')
const fileKeyword = ref<string>('')
const editPathname = ref<string>('')

const currentIcon = computed(() =>
  currentDept.value === 0
    ? 'mdi-file-cabinet'
    : currentDept.value === 1
    ? 'inbox'
    : 'o_folder_open'
)
const props = withDefaults(
  defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
  {
    action: false,
  }
)

async function handleSubmit() {
  if (!inputFile.value) return

  await uploadFile(currentPath.value, inputFile.value, {
    title: fileTitle.value,
    description: fileDesc.value,
    keyword: [fileKeyword.value],
    category: [fileCategory.value],
  })
}
</script>

<template>
  <div class="q-mt-md">
    <div class="q-gutter-md">
      <div
        :key="value.name"
        v-for="value in currentFolder"
        class="inline-block"
      >
        <div class="box border-radius-inherit">
          <q-card flat @click="() => getFolder(value.pathname)">
            <q-card-section class="column justify-center relative q-px-xl">
              <q-icon :name="currentIcon" size="6em" color="primary" />
              <div
                class="absolute"
                style="top: 0.5rem; right: 0.5rem"
                v-if="props.action"
              >
                <file-item-action
                  :editname="value.name"
                  :pathname="value.pathname"
                  @editname="
                    () => {
                      drawer = !drawer
                      drawerStatus = 'edit'
                      editPathname = value.pathname
                    }
                  "
                />
              </div>
              <span class="text-center q-pt-md">{{ value.name }}</span>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div
        class="inline-block"
        v-if="props.action && currentDept < 4"
        tabindex="0"
        

      >
        <div class="dashed border-radius-inherit">
          <q-card
            flat
            @click="
              () => {
                drawer = !drawer
                drawerStatus = 'create'
                drawerFile = false
              }
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
              <q-icon
                :name="currentIcon"
                class="add-icon"
                size="6em"
                color="primary"
              />
              <q-btn round class="add-button" color="white" size="10px">
                <q-icon name="add" color="primary" size="1.5rem"></q-icon>
              </q-btn>
              <span class="text-center q-pt-md"
                >สร้าง{{ DEPT_NAME[currentDept] }}ใหม่</span
              >
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </div>
  <div class="q-mt-md">
    <div class="q-gutter-md">
      <div
        v-for="(value, index) in currentFile"
        :key="value.title"
        class="inline-block"
      >
        <div class="box border-radius-inherit">
          <q-card
            flat
            @click="
              () => {
                getFileInfo(currentFile[index])
                isPreview = true
              }
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
              <file-icon
                size="preview"
                :fileMimeType="value.fileType"
                ref="fileIconComp"
              />
              <div
                class="absolute"
                style="top: 0.5rem; right: 0.5rem"
                v-if="props.action"
              >
                <!-- TODO: Edit file data -->
              </div>
              <span class="text-center q-pt-md">{{ value.title }}</span>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div class="inline-block" v-if="props.action && currentDept > 2">
        <div class="dashed border-radius-inherit">
          <q-card
            flat
            @click="
              () => {
                drawerFile = !drawerFile
                drawer = false
              }
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
              <q-icon
                name="mdi-file"
                class="add-icon"
                size="6em"
                color="primary"
              />
              <q-btn round class="add-button" color="white" size="10px">
                <q-icon name="add" color="primary" size="1.5rem"></q-icon>
              </q-btn>
              <span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </div>

  <from-edit
    :drawer="drawer"
    :drawerStatus="drawerStatus"
    :DEPT_NAME="DEPT_NAME"
    :currentDept="currentDept"
    :editPathname="editPathname"
    @update:drawer="() => (drawer = !drawer)"
  />

  <q-drawer
    class="q-pa-md"
    side="right"
    v-model="drawerFile"
    bordered
    :width="300"
    :breakpoint="500"
    overlay
  >
    <q-toolbar class="q-mb-md q-pa-none">
      <q-toolbar-title>
        <span class="text-weight-bold">สร้างเอกสาร</span>
      </q-toolbar-title>
      <q-btn
        flat
        round
        dense
        icon="close"
        v-close-popup
        color="red"
        @click="() => (drawerFile = !drawerFile)"
      />
    </q-toolbar>
    <span class="text-weight-bold">อัพโหลดไฟล์</span>
    <q-file
      v-model="inputFile"
      class="q-my-md"
      label="Pick files"
      dense
      outlined
    >
      <template v-slot:prepend>
        <q-icon name="attach_file" />
      </template>
    </q-file>
    <span class="text-weight-bold">ชื่อเรื่อง</span>
    <q-input
      class="q-my-md"
      outlined
      v-model="fileTitle"
      placeholder="กรอกชื่อเรื่อง"
      dense
    />
    <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
    <q-input
      class="q-my-md"
      outlined
      type="textarea"
      v-model="fileDesc"
      placeholder="กรอกรายละเอียด"
      dense
    />
    <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
    <q-input
      class="q-my-md"
      outlined
      v-model="fileCategory"
      placeholder="เลือกกลุ่ม/หมวดหมู่"
      dense
    />
    <span class="text-weight-bold">คำสำคัญ</span>
    <q-input
      class="q-my-md"
      outlined
      v-model="fileKeyword"
      placeholder="กรอกคำสำคัญ"
      dense
    />
    <q-btn
      class="q-px-md"
      label="บันทึก"
      type="submit"
      color="primary"
      dense
      @click="
        () => {
          drawerFile = !drawerFile
          handleSubmit()
        }
      "
    />
  </q-drawer>
</template>

<style lang="scss" scoped>
.box {
  display: inline-block;
  border: 2px solid #f1f2f4;
  border-radius: 8px;
  cursor: pointer;
}

.dashed {
  opacity: 0.4;
  display: inline-block;
  border: 2px solid #babdc3;
  border-radius: 8px;
  cursor: pointer;
  border-style: dashed;
}

.add-icon {
  margin: auto auto;
}

.add-button {
  position: absolute;
  top: 75px;
  right: 45px;
  background-color: white;
}
</style>
