<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { tokenParsed } from "@/plugins/auth";
import http from "@/plugins/http";
import config from "@/app.config";

import type {
  ResponseInbox,
  DataInbox,
} from "@/interface/response/dashboard/dashboard";

import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
  showLoader,
  hideLoader,
  success,
  messageError,
  date2Thai,
  dialogRemove,
} = mixin;

const splitterModel = ref<number>(30); // ขนาดของกล่องข้อความ
const link = ref<string>("0"); // รายการกล่องข้อความ
const inboxList = ref<DataInbox[]>([]); //ข้อมูลรายการกล่องข้อความ
const data = ref<DataInbox[]>([]); //ข้อมูลกล่องข้อความ
const totalInbox = ref<number>(0); // จำนวนกล่องข้อความ
const scrollTargetRef = ref<any>(null);
//กำหนดรูปแบบแสดงวนเวลา
const thaiOptions: Intl.DateTimeFormatOptions = {
  hour: "2-digit",
  minute: "2-digit",
};
const isLoadInbox = ref<boolean>(false); // สถานะการโหลด
const modalReply = ref<boolean>(false); // ตอบกลับข้อความ
const modalAdministrator = ref<boolean>(false); //ส่งข้อความไปยังผู้ดูแลระบบของหน่วยงาน
const isSuperAdmin = ref<boolean>(false);

/**
 * โหลดรายการกล่องข้องความ
 * เมื่อ index = 1 โชว์โหลด ถ้าไม่ไม่แสดง
 *
 * @param index หน้าที่ต้องการโหลด
 */
async function getData(index: number) {
  isLoadInbox.value = false;
  index === 1 && showLoader();
  index != 0 &&
    (await http
      .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
      .then(async (res) => {
        const data = await res.data.result.data;
        totalInbox.value = await res.data.result.total;

        let list: DataInbox[] = [];
        data &&
          data.map((e: ResponseInbox) => {
            list.push({
              no: e.id ?? "",
              sender:
                e.createdFullName == "" || e.createdFullName == null
                  ? "เจ้าหน้าที่"
                  : e.createdFullName,
              subject: e.subject ?? "",
              timereceive: new Date(e.receiveDate),
              body: e.body ?? "",
              payload: e.payload,
              ratingModel: 0,
              isOpen: e.isOpen,
            });
          });
        inboxList.value.push(...list);

        if (inboxList.value.length > 0 && index === 1) {
          selectInbox(inboxList.value[0].no);
        }
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        isLoadInbox.value = true;
        hideLoader();
      }));
}

/**
 * เลือกแสดงกล่องข้อความ
 * @param id ข้อความ
 */
function selectInbox(id: string) {
  http
    .get(config.API.msgInboxDelete(id))
    .then(() => {
      link.value = id;
      data.value = inboxList.value.filter((r) => r.no == id);
      for (const item of data.value) {
        item.isOpen = true;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * ยืนยันการลบกล่องข้อความ
 * @param id
 */
function deleteData(id: string) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.msgInboxDelete(id))
      .then(() => {
        // เมื่แ ข้อความเหลือ 6 เรียกโหลดรายการกล่องข้องความใหม่
        if (inboxList.value.length === 6) {
          inboxList.value = [];
          getData(1);
        }
        const position = inboxList.value.findIndex((item) => item.no === id);
        if (position !== -1) {
          inboxList.value.splice(position, 1);
          data.value = [];
        }
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ดาวน์โหลดเอกสารแนบ
 * @param url ลิงก์โหลดเอกสาร
 */
function fileOpen(url: string) {
  window.open(url, "_blank");
}

/**
 * เปิด popup การตอบกลับข้อความ
 */
function dialogRepleOpen() {
  modalReply.value = true;
}

/**
 * ปิด popup การตอบกลับข้อความ
 */
function modalReplyClose() {
  modalReply.value = false;
  modalAdministrator.value = false;
}

/**
 * ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
 *
 * @param index - ของรายการที่กำลังโหลด
 * @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
 */
function onLoad(index: number, done: Function) {
  const num = index === 1 ? 0 : index++;
  if (inboxList.value.length < totalInbox.value && isLoadInbox) {
    setTimeout(() => {
      getData(num);
      done();
    }, 3000);
  }
}

onMounted(async () => {
  await getData(1);
  //  ดิงชื่อผู้ใช้งานจาก keycloak
  const tokenParsedData = await tokenParsed();
  if (tokenParsedData != null) {
    isSuperAdmin.value = tokenParsedData.role.includes("SUPER_ADMIN");
  }
});
</script>

<!-- page:หน้าแรก -->
<template>
  <div class="toptitle text-dark">หน้าแรก</div>
  <q-splitter
    v-model="splitterModel"
    :horizontal="$q.screen.lt.sm"
    separator-class="bg-grey-2 row"
    separator-style="width: 12px"
    class="text-dark"
    :style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'"
  >
    <template v-slot:before>
      <q-card
        flat
        bordered
        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
      >
        <div class="q-px-md q-py-sm row col-12 items-center">
          <div class="text-subtitle1 text-weight-medium">
            กล่องข้อความ
            <q-btn
              v-if="isSuperAdmin"
              flat
              round
              dense
              icon="add"
              size="10px"
              color="add"
              @click="modalAdministrator = true"
            >
              <q-tooltip>ส่งข้อความไปยังผู้ดูแลระบบของหน่วยงาน</q-tooltip>
            </q-btn>
          </div>
          <q-space />
          <div v-if="totalInbox" class="text-grey-5" style="font-size: 12px">
            ทั้งหมด {{ totalInbox }} ข้อความ
          </div>
        </div>
        <q-separator />

        <div
          v-if="totalInbox != 0"
          ref="scrollTargetRef"
          style="max-height: 90%; overflow: auto"
        >
          <q-infinite-scroll
            @load="onLoad"
            :offset="250"
            class="q-pa-sm"
            :scroll-target="scrollTargetRef"
          >
            <q-list v-for="(contact, index) in inboxList" :key="contact.no">
              <q-item
                clickable
                v-ripple
                class="mytry"
                :active="link === contact.no"
                active-class="my-menu-link"
                @click="selectInbox(contact.no)"
              >
                <q-item-section>
                  <q-item-label caption class="text-weight-light">
                    {{ date2Thai(contact.timereceive) }}
                    {{
                      new Date(contact.timereceive).toLocaleTimeString(
                        "th-TH",
                        thaiOptions
                      )
                    }}
                    น. <q-space />
                  </q-item-label>
                  <q-item-label
                    :class="!contact.isOpen ? 'text-weight-medium' : ''"
                    >{{ contact.sender }}</q-item-label
                  >
                  <q-item-label
                    :class="
                      !contact.isOpen ? 'text-weight-medium text-black' : ''
                    "
                    caption
                    lines="2"
                    >{{ contact.subject }}</q-item-label
                  >
                </q-item-section>
                <q-item-section side top>
                  <q-icon
                    v-if="contact.payload !== null"
                    class="q-mt-md"
                    name="mdi-paperclip"
                    color="grey-5"
                    size="xs"
                  />
                </q-item-section>
              </q-item>

              <q-separator
                v-if="index + 1 < inboxList.length"
                :key="index"
                color="grey-3 q-mt-sm"
              />
            </q-list>

            <template v-slot:loading v-if="inboxList.length < totalInbox">
              <div class="row justify-center q-my-md">
                <q-spinner-dots color="primary" size="40px" />
              </div>
            </template>
          </q-infinite-scroll>
        </div>
      </q-card>
    </template>

    <template v-slot:after>
      <q-card
        v-if="data != null"
        class="q-pa-none rounded-borders"
        flat
        bordered
        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
      >
        <div class="col-12" v-for="(d, index) in data" :key="index">
          <div class="col-12 q-pa-xs">
            <q-item>
              <q-item-section top avatar>
                <q-avatar
                  size="40px"
                  rounded
                  color="primary"
                  class="text-white"
                >
                  <q-icon name="mdi-account" size="28px" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label class="text-weight-medium">{{
                  d.subject
                }}</q-item-label>
                <q-item-label caption lines="2"
                  >จาก : {{ d.sender }}</q-item-label
                >
              </q-item-section>

              <q-item-section side top>
                <q-item-label caption>{{
                  date2Thai(d.timereceive)
                }}</q-item-label>
                <div class="text-grey-8 q-gutter-xs q-pt-sm">
                  <!-- Reply -->
                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-reply"
                    size="10px"
                    color="grey-7"
                    @click="dialogRepleOpen()"
                  >
                    <q-tooltip>ตอบกลับข้อความ</q-tooltip>
                  </q-btn>

                  <PopupReplyInbox
                    :modal="modalReply"
                    :idInbox="d.no"
                    :click-close="modalReplyClose"
                  />

                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-trash-can"
                    size="10px"
                    color="red"
                    @click="deleteData(d.no)"
                  />
                </div>
              </q-item-section>
            </q-item>
          </div>
          <div flat class="q-mb-md">
            <q-card
              flat
              bordered
              class="text-dark q-mx-md q-pa-md bg-grey-1"
              :style="$q.screen.gt.xs ? 'height: 64vh' : ''"
              >{{ d.body }}</q-card
            >

            <div :class="$q.screen.gt.xs ? 'absolute-bottom q-mb-md' : ''">
              <div class="row col-12 self-center q-px-md q-pt-md">
                <div v-if="d.payload !== null" class="row self-center pointer">
                  <q-icon name="mdi-paperclip" color="grey" size="xs" />
                  <div class="text-grey-8 q-pl-sm text-weight-light">
                    ดาวน์โหลดเอกสารแนบ
                  </div>
                  <q-menu
                    transition-show="jump-down"
                    transition-hide="jump-up"
                    anchor="top middle"
                    self="bottom middle"
                  >
                    <q-list style="min-width: 160px">
                      <div
                        v-for="(link, num) in d.payload.attachments"
                        :key="num"
                      >
                        <q-item clickable @click="fileOpen(link.url)">
                          <q-item-section>{{ link.name }}</q-item-section>
                        </q-item>
                        <q-separator />
                      </div>
                    </q-list>
                  </q-menu>
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </template>
  </q-splitter>

  <PopupReplyInbox
    :modal="modalAdministrator"
    :click-close="modalReplyClose"
    type="Administrator"
  />
</template>

<style>
.my-menu-link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  border: 1px solid #1bb19ab8;
  color: #1bb19ab8 !important;
}

.my-menu-link .q-hoverable {
  border-radius: 5px;
}

.mytry {
  font-size: 0.75rem;
  padding: 12px;
}

.mytry:hover {
  border-radius: 5px;
}
.pointer {
  cursor: pointer;
}
</style>
