<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useTreeDataStore } from '@/stores/tree-data'

const { currentPath } = storeToRefs(useTreeDataStore())
const { uploadFile, checkFile } = useTreeDataStore()

const inputFile = ref<File>()
const fileTitle = ref<string>('')
const fileDesc = ref<string>('')
const fileCategory = ref<string>('')
const fileKeyword = ref<string>('')
const notification = ref<boolean>(false)
const emit = defineEmits(['update:drawerFile'])
const props = withDefaults(defineProps<{ drawerFile: boolean }>(), {
  drawerFile: false,
})

async function handleSubmit(continueUpload:boolean = false) {
  if (!inputFile.value) return
  // getFile(p)
  if (checkFile(inputFile.value.name) || continueUpload ) {
    await uploadFile(currentPath.value, inputFile.value, {
      title: fileTitle.value,
      description: fileDesc.value,
      keyword: [fileKeyword.value],
      category: [fileCategory.value],
    })
  } else notification.value = true
}
</script>

<template>
  <q-drawer
    class="q-pa-md"
    side="right"
    v-model="props.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="() => $emit('update: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="
        () => {
          $emit('update:drawerFile')
          handleSubmit()
        }
      "
    />
  </q-drawer>

  <q-btn label="Click me" color="primary" @click="notification = true" />

  <q-dialog
    v-model="notification"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 400px">
      <q-card-section>
        <div class="text-h6">เตือนพบไฟล์ชื่อซ้ำในระบบ</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        ถ้าดำเนินการต่อจะอัพข้อมูลทับกับอันเก่า
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-red">
        <q-space />
        <q-btn flat label="ยกเลิก" v-close-popup />

        <q-btn
          flat
          label="ดำเนินการต่อ"
          v-close-popup
          class="text-teal"
          @click="()=> handleSubmit(true)"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</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>
