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

import router from "@/router";
import config from "@/app.config";
import http from "@/plugins/http";
import { tokenParsed } from "@/plugins/auth";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { usePositionKeycloakStore } from "@/stores/positionKeycloak";

import type {
  InboxDetail,
  InboxList,
  MenuMainList,
} from "@/modules/01_dashboard/interface/Main";

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

const $q = useQuasar();
const dataStore = useDataStore();
const positionKeycloakStore = usePositionKeycloakStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, date2Thai, messageError } = mixin;

const fullname = ref<string>(""); // ชื่อผู้ใช้
const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ

/**
 * ฟังก์ชั่นดึงข้อมูลกล่องข้อความ
 * @param index หน้าที่โหลดข้อมูล
 */
const fetchlistInbox = async (index: number) => {
  if (index === 1) {
    isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
  }

  index != 0 &&
    (await http
      .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
      .then((res) => {
        let data: InboxList[] = res.data.result.data;
        totalInbox.value = res.data.result.total;
        let listItem: InboxDetail[] = [];
        if (data && data.length > 0) {
          data.map((e: InboxList) => {
            listItem.push({
              no: e.id ?? "",
              sender: !e.createdFullName ? "เจ้าหน้าที่" : e.createdFullName,
              subject: e.subject ?? "",
              body: e.body ?? "-",
              ratingModel: 0,
              receiveDate: date2Thai(e.receiveDate, false, true),
              payload: e.payload,
              isOpen: e.isOpen,
            });
          });
          inboxList.value.push(...listItem);
        }
      })
      .finally(() => {
        isLoadingInbox.value = false;
      }));
};

/**
 * ฟังก์ชั่น redirect ไปหน้าระบบ
 * @param path ที่อยู่หน้า
 */
const goToPage = (path?: string) => {
  router.push(`${path}`);
};

const modalReply = ref<boolean>(false); // เปิด/ปิด dialog ตอบกลับข้อความ/ส่งข้อความ
const contactNo = ref<string>(); // id ข้อความที่ต้องการตอบกลับ
/**
 * ฟังก์ชั่นเปิด dialog ตอบกลับข้อความ
 * @param id id ข้อความ
 */
function dialogRepleOpen(id: string) {
  contactNo.value = id; // กำหนด id ข้อความ
  modalReply.value = true; // เปิด dialog ตอบกลับข้อความ
}

/**
 * ฟังก์ชั่นปิด dialog ตอบกลับข้อความ
 */
function modalReplyClose() {
  contactNo.value = ""; // ล้าง id ข้อความ
  modalReply.value = false; // ปิด dialog ตอบกลับข้อความ
}

const dataInbox = ref<InboxDetail>(); // รายละเอียดข้อความ
const modalDetial = ref<boolean>(false); // เปิด/ปิด dialog รายละเอียดข้อความ
/**
 * ฟังก์ชั่นเปิด dialog รายละเอียดข้อความ
 * @param data รายละเอียดข้อความ
 */
async function onClickOpenPopupDetail(data: InboxDetail) {
  showLoader();
  await http
    .get(config.API.msgInboxRead(data.no))
    .then(() => {
      const filterDate = inboxList.value.filter(
        (r: InboxDetail) => r.no == data.no,
      );
      for (const item of filterDate) {
        item.isOpen = true;
      }
      dataInbox.value = data;
      idInboxActive.value = data.no;
      modalDetial.value = !modalDetial.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชั่นกำหนดรายละเอียดข้อความ ส่งไปยัง dialog
 */
function updateModalDetail(val: boolean) {
  modalDetial.value = val; // กำหนดรายละเอียดข้อความที่เลือก
}

const scrollTargetRef = ref<any>(null); // เช็คการ scroll ของกล่องข้อความ
const totalInbox = ref<number>(0); // จำนวนข้อความทั้งหมด
/**
 * ฟังก์ชั่นโหลดข้อมูลกล่องข้อความ
 * @param index หน้าที่โหลดข้อมูล
 * @param done ฟังก์ชั่นเมื่อโหลดข้อมูลเสร็จ
 */
async function onLoad(index: number, done: Function) {
  const num = index === 1 ? 0 : index++;
  try {
    // ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
    if (inboxList.value.length >= totalInbox.value) {
      done(true);
      return;
    }

    await fetchlistInbox(num);
    done();
  } catch (error) {
    done(true);
  }
}

onMounted(async () => {
  await fetchlistInbox(1); // ดึงข้อมูลกล่องข้อความ
  // ดึงข้อมูลผู้ใช้
  const user = await tokenParsed();
  if (user) {
    fullname.value = user.name;
  }
});
</script>

<template>
  <div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
    <div class="col-12 row" v-if="!$q.screen.gt.xs">
      <div class="text-white text-weight-light text-18px">
        สวัสดี, {{ fullname }}
      </div>
      <div style="color: #ffffff" class="text-18px text-weight-medium col-12">
        ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-9">
      <div class="row justify-start q-col-gutter-md">
        <div
          class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
          v-for="(item, j) in dataStore.menuList"
          :key="j"
        >
          <q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
            <q-skeleton width="100%" height="180px" />
          </q-card>

          <q-card
            v-else
            bordered
            @click="goToPage(item.path)"
            class="noactive col-12"
          >
            <div class="col-12">
              <q-avatar
                :color="item.color"
                text-color="white"
                :size="$q.screen.gt.xs ? '55px' : '40px'"
              >
                <q-icon
                  :name="item.icon"
                  :size="$q.screen.gt.xs ? '28px' : '20px'"
                  color="black"
                />
              </q-avatar>
            </div>
            <div class="q-pt-md col-12 text-left text-18px">
              {{ item.title }}
            </div>
            <div
              class="col-12 text-left text-grey text-weight-regular gt-xs"
              style="font-size: 14px"
            >
              {{ item.sub }}
            </div>
          </q-card>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 row">
      <q-card
        flat
        bordered
        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 500px;'"
        class="q-pb-sm col-12"
      >
        <div class="col-12 row q-px-md q-pt-md q-pb-sm">
          <div class="text-subtitle1 text-weight-bold text-dark">
            กล่องข้อความ
          </div>
          <q-space />
          <div v-if="isLoadingInbox">
            <q-skeleton type="text" width="80px" />
          </div>
          <div v-else class="text-grey-5" style="font-size: 12px">
            ทั้งหมด {{ totalInbox }} ข้อความ
          </div>
        </div>

        <div
          class="q-pa-sm"
          v-if="isLoadingInbox"
          style="height: calc(100% - 60px)"
        >
          <div v-for="(item, index) in 3">
            <q-skeleton type="text" width="10%" class="text-subtitle1" />
            <q-skeleton type="text" width="50%" class="text-subtitle1" />
            <q-skeleton type="text" class="text-caption" />
          </div>
        </div>

        <div
          v-if="totalInbox != 0 && !isLoadingInbox"
          ref="scrollTargetRef"
          style="max-height: 90%; overflow: auto"
        >
          <q-infinite-scroll
            @load="onLoad"
            :offset="250"
            class="q-px-md"
            :scroll-target="scrollTargetRef"
          >
            <div
              v-for="(item, index) in inboxList"
              :key="index"
              class="caption"
            >
              <q-item
                clickable
                v-ripple
                class="'q-py-md q-mb-sm my-menu'"
                :active="idInboxActive === item.no"
                active-class="my-menu-link"
                @click.stop.prevent="onClickOpenPopupDetail(item)"
              >
                <q-item-section>
                  <q-item-label caption class="text-weight-light">
                    {{ item.receiveDate }}
                    <q-space />
                  </q-item-label>
                  <q-item-label
                    :class="!item.isOpen ? 'text-weight-medium' : 'text-grey-7'"
                  >
                    {{ item.sender }}
                    <q-icon
                      v-if="item.payload"
                      name="mdi-paperclip"
                      color="grey-6"
                      size="18px"
                  /></q-item-label>
                  <q-item-label
                    caption
                    :class="!item.isOpen ? 'text-weight-medium text-dark' : ''"
                    lines="2"
                    >{{ item.subject }}</q-item-label
                  >
                </q-item-section>

                <q-item-section side top>
                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-reply"
                    size="10px"
                    color="grey-7"
                    @click.stop.prevent="dialogRepleOpen(item.no)"
                  >
                    <q-tooltip>ตอบกลับข้อความ</q-tooltip>
                  </q-btn>
                </q-item-section>
              </q-item>
            </div>
            <template v-slot:loading>
              <div
                class="row justify-center q-my-md"
                v-if="inboxList.length < totalInbox"
              >
                <q-spinner-dots color="primary" size="40px" />
              </div>
            </template>
          </q-infinite-scroll>
        </div>

        <q-banner
          rounded
          class="bg-amber-1 text-center q-mx-sm"
          v-else-if="totalInbox === 0 && !isLoadingInbox"
        >
          <div class="text-yellow-10">
            <q-icon
              name="mdi-alert-box"
              class="q-mx-xs"
              size="sm"
              color="yellow-10"
            />
            ไม่พบข้อความ
          </div>
        </q-banner>
      </q-card>
    </div>
  </div>
  <PopupReplyInbox
    :modal="modalReply"
    :id-inbox="contactNo"
    :click-close="modalReplyClose"
  />

  <PopupDetailInbox
    :modal="modalDetial"
    :data="dataInbox"
    @update:modal="updateModalDetail"
  />
</template>
<style scoped>
.my-menu-notread {
  color: #1bb19b;
  background: #ebf9f7 !important;
  font-weight: 600;
  border-radius: 10px;
}
.my-menu-link {
  color: #1bb19b;
  background: #ebf9f7 !important;
  font-weight: 600;
  border-radius: 10px;
}

.my-menu-link .q-hoverable {
  border-radius: 10px;
}
.my-menu {
  background: #f1f0f04a;
  border-radius: 10px;
}
.q-card {
  border-radius: 12px;
}
.text-18px {
  font-size: 1.25em;
}
.noactive {
  color: #35473c;
  border-radius: 12px;
  padding: 10%;
  transition: 0.1s ease;
  opacity: 1;
  cursor: pointer;
}
.noactive:hover {
  background: #ebf9f7;
  color: #1bb19b !important;
  font-weight: 600;
  border: 1px solid #6dbdb142;
}
.disabledcard {
  color: rgba(105, 104, 104, 0.733) !important;
  border-color: rgba(207, 207, 207, 0.322) !important;
  box-shadow: none !important;
  border-radius: 12px;
  cursor: no-drop !important;
  padding: 10%;
}
</style>
