<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import keycloak, { kcLogout } from '@/plugins/keycloak'
import http from '@/plugins/http'
import config from '@/app.config'

import type { notiType } from '@/interface/index/Main'
import { useCounterMixin } from '@/stores/mixin'
import type { Noti } from '@/interface/response/Main'

const mixin = useCounterMixin()
const { date2Thai, hideLoader, messageError, dialogRemove, success } = mixin
const router = useRouter()
const $q = useQuasar()

const notiTrigger = ref<boolean>(false)
const notiList = ref<notiType[]>([])
const totalNotiList = ref<number>(0)
const totalNoti = ref<number>(0)
/*** ฟังก์ชั่นดึงข้อมูลจำนวนการแจ้งเตือน */
async function fetchTotolNotificate() {
  await http.get(config.API.msgNotificateTotal).then((res) => {
    totalNoti.value = res.data.result
  })
  // .catch((err) => {
  //   messageError($q, err)
  // })
}

const statusLoad = ref<boolean>(false)
/**
 * ฟังก์ชั่นดึงข้อมูลรายการแจ้งเตือน
 * @param index page ที่ต้องการโหลดข้อมูล
 * @param type DEL คือโหลดหลังลบข้อความ, NOMAL คือกรณีโหลดข้อมูลปกติ
 */
async function fetchNotifications(index: number, type: string) {
  await http
    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
    .then((res) => {
      const response = res.data.result.data
      totalNotiList.value = res.data.result.total
      const list: notiType[] = []
      if (type === 'DEL') {
        notiList.value = []
      }

      if (response.length === 0) {
        response.map((e: Noti) => {
          list.push({
            id: e.id,
            sender:
              e.createdFullName == '' || e.createdFullName == null
                ? 'เจ้าหน้าที่'[0]
                : e.createdFullName[0],
            body: e.body ?? '',
            timereceive: e.receiveDate,
            isOpen: e.isOpen,
          })
        })
        notiList.value.push(...list)
        statusLoad.value = totalNotiList.value === 0 ? true : false
      }
    })
  // .catch((err) => {
  //   messageError($q, err)
  // })
}

/**
 * function ลบรายการแจ้งเตือน
 * @param id noti
 */
async function onClickDelete(id: string, index: number) {
  dialogRemove($q, async () => {
    await http
      .delete(config.API.msgId(id))
      .then(() => {
        notiList.value.splice(index, 1)
        totalNotiList.value--
        success($q, 'ลบข้อมูลสำเร็จ')
      })
      .catch((e) => {
        messageError($q, e)
      })
      .finally(async () => {
        notiList.value.length === 14 && fetchNotifications(1, 'DEL')
        hideLoader()
      })
  })
}

/** function logout*/
function onClickLogout() {
  $q.dialog({
    title: 'ยืนยันการออกจากระบบ',
    message: `ต้องการออกจากระบบใช่หรือไม่?`,
    cancel: 'ยกเลิก',
    ok: 'ยืนยัน',
    persistent: true,
  }).onOk(async () => {
    kcLogout()
  })
}

const thaiOptions: Intl.DateTimeFormatOptions = {
  hour: '2-digit',
  minute: '2-digit',
}

const page = ref<number>(0)
/**
 * โหลดรายการแจ้งเตือนเพิ่มเมื่อ scroll
 * @param index
 * @param done
 */
function onLoad(index: any, done: any) {
  if (
    notiList.value.length < totalNotiList.value ||
    (notiList.value.length == 0 && totalNotiList.value === 0)
  ) {
    page.value++
    setTimeout(() => {
      fetchNotifications(page.value, 'NOMAL')
      done()
    }, 1500)
  }
}

watch(
  () => notiTrigger.value,
  () => {
    if (!notiTrigger.value) {
      const updatedNotifications = notiList.value.map((item) => ({
        ...item,
        isOpen: true,
      }))
      notiList.value = updatedNotifications
      fetchTotolNotificate()
    }
  }
)

const fullName = ref<string>('')
onMounted(async () => {
  fetchTotolNotificate()
  if (keycloak.tokenParsed != null) {
    fullName.value = keycloak.tokenParsed.name
  }
})
</script>

<template>
  <q-layout view="hHh LpR fFr">
    <!-- header -->
    <q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
      <q-toolbar
        class="q-my-xs items-center"
        :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
      >
        <div class="row items-center">
          <q-avatar style="background: linear-gradient(#4ce2d3, #02a998)">
            <q-img
              src="@/assets/logo1.png"
              spinner-color="white"
              style="height: 35px; width: 35px"
            />
          </q-avatar>
          <div class="row q-ml-md text-left items-center gt-xs">
            <div
              style="color: #ffffff; line-height: 10px"
              class="text-body2 text-weight-bolder col-12"
            >
              ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
            </div>
            <div class="text-caption text-white">กรุงเทพมหานคร</div>
          </div>
        </div>
        <q-space />
        <q-btn
          icon="history"
          unelevated
          rounded
          dense
          flat
          color="white"
          @click="router.push('/history')"
        />
        <q-btn round dense flat size="13px" class="q-mx-md">
          <q-icon name="notifications" size="24px" color="white" />

          <q-badge
            rounded
            v-show="totalNoti !== 0"
            color="negative"
            text-color="white"
            floating
            >{{ totalNoti }}</q-badge
          >

          <q-menu
            v-model="notiTrigger"
            anchor="bottom middle"
            self="top middle"
            class="q-mx-lg q-mt-xl"
            style="width: 480px"
          >
            <div class="q-px-md q-py-sm row col-12 items-center">
              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
              <q-space />
              <div class="text-grey-5" style="font-size: 12px">
                ทั้งหมด {{ totalNotiList }} ข้อความ
              </div>
            </div>
            <q-infinite-scroll @load="onLoad" v-if="statusLoad === false">
              <div
                v-for="(item, index) in notiList"
                :key="index"
                class="caption"
              >
                <q-item v-ripple class="mytry q-py-sm" dense>
                  <q-item-section avatar top style="min-width: 10px">
                    <q-avatar
                      rounded
                      color="primary"
                      size="25px"
                      text-color="white"
                    >
                      <span class="text-weight-medium text-uppercase">{{
                        item.body[0]
                      }}</span>
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label
                      caption
                      :class="
                        item.isOpen
                          ? 'text-grey-7'
                          : 'text-black text-weight-medium'
                      "
                      >{{ item.body }}</q-item-label
                    >
                    <q-item-label caption class="text-weight-light">
                      {{ date2Thai(item.timereceive) }}
                      {{
                        new Date(item.timereceive).toLocaleTimeString(
                          'th-TH',
                          thaiOptions
                        )
                      }}
                      น. <q-space />
                    </q-item-label>
                    <!-- <q-item-label
                      caption
                      class="row items-center text-grey-7"
                      style="font-size: 12px"
                      >{{ item.timereceive }}</q-item-label
                    > -->
                  </q-item-section>
                  <div>
                    <q-btn
                      size="sm"
                      unelevated
                      dense
                      icon="mdi-close"
                      class="mybtn q-mx-xs"
                      @click="onClickDelete(item.id, index)"
                    ></q-btn>
                  </div>
                </q-item>
              </div>

              <template
                v-slot:loading
                v-if="
                  notiList.length < totalNotiList ||
                  (notiList.length === 0, totalNotiList === 0)
                "
              >
                <div class="row justify-center q-my-md">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
            <div class="q-pa-md" v-else>
              <q-banner rounded class="bg-amber-1 text-center">
                <div class="text-yellow-10">
                  <q-icon
                    name="mdi-alert-box"
                    class="q-mx-xs"
                    size="sm"
                    color="yellow-10"
                  />
                  ไม่มีข้อมูล
                </div>
              </q-banner>
            </div>
          </q-menu>
        </q-btn>
        <q-btn
          round
          dense
          color="white"
          flat
          icon="account_circle"
          style="font-size: 16px"
        >
          <q-menu>
            <div class="q-pa-md" style="max-width: 500px">
              <q-list>
                <q-item>
                  <q-item-section avatar>
                    <q-icon color="primary" name="account_circle" />
                  </q-item-section>

                  <q-item-section>{{ fullName }}</q-item-section>
                </q-item>

                <q-item class="text-center">
                  <q-item-section>
                    <q-item-label>
                      <q-btn
                        color="primary"
                        label="ออกจากระบบ"
                        push
                        size="sm"
                        @click="onClickLogout"
                    /></q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </div> </q-menu
        ></q-btn>
      </q-toolbar>
    </q-header>
    <div
      class="bg-top"
      :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
    />
    <q-page-container class="bg-grey-2 q-pb-md">
      <q-page
        :style="
          $q.screen.gt.xs
            ? 'padding: 1.8% 2%; margin-top: -200px;'
            : 'padding: 5% 4%; margin-top: -200px;'
        "
      >
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style>
.bg-drawer {
  background: #242a3d;
}

.menu {
  padding-bottom: 5px;
  padding-top: 5px;
}

.tabsHome .q-tab__icon {
  font-size: 18px;
}

.border-100 {
  border-radius: 100px;
}

.bg-top {
  background: #273238 !important;
}

.header-br {
  border-bottom: 1px solid #fdfdfd31;
}

.menuActive {
  background: #1e2234;
  border-radius: 0 100px 100px 0;
  margin-right: 4%;
}

.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
  /* border: 1px solid #eeeded; */
  border-radius: 8px;
}

.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}

.q-field--outlined .q-field__control {
  border-radius: 5px;
}

.q-field--outlined .q-field__control:before {
  border-color: #c8d3db;
}

/* .q-field--outlined .q-icon {
  color: #7474747f;
} */

.shadow-0 {
  box-shadow: none !important;
}

.btnBlue {
  background-color: #016987;
  color: #fff;
}
</style>
