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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
import { useDataStore } from "@/stores/data";
import { getColumnLabel } from "@/utils/functions";

import type { PropsTable } from "@/interface/PropsTable";
import type { DataCommander } from "@/modules/05_leave/interface/response/main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const dataStore = useLeaveStore();
const storeData = useDataStore();
const { date2Thai, messageError } = useCounterMixin();

/** ฟังก์ชันสำหรับลบคำที่ซ้ำติดกัน */
function removeDuplicateWords(text: string): string {
  if (!text) return text;

  // วิธีที่ดีกว่า: ใช้ regex เพื่อหาและลบคำที่ซ้ำ
  return text.replace(/([ก-๙]{2,})\1+/g, "$1");
}

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  model: {
    type: String,
    default: "",
  },
});

const modal = ref<boolean>(false);

const isAct = ref<boolean>(false);
const selected = ref<DataCommander[]>([]);
const search = ref<string>("");
const isLoading = ref<boolean>(false);
const rows = ref<DataCommander[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "firstName",
    format(val, row) {
      return `${row.prefix}${row.firstName} ${row.lastName}`;
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    sortable: true,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionSign",
    align: "left",
    label: "ตำแหน่งใต้ลายเซ็น",
    sortable: true,
    field: "positionSign",
    format(val) {
      return removeDuplicateWords(val || "");
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const pagination = ref<PropsTable.Pagination>({
  sortBy: "",
  descending: true,
  page: 1,
  rowsPerPage: 10,
  rowsNumber: 0,
});

/** ฟังก์ชันสำหรับดึงข้อมูลผู้บังคับบัญชา */
async function getCommander() {
  isLoading.value = true;
  await http
    .put(config.API.commanderOperate, {
      isAct: isAct.value,
      keyword: search.value.trim(),
      page: pagination.value.page,
      pageSize: pagination.value.rowsPerPage,
      keycloakId: storeData.formData.keycloakId,
      ...(pagination.value.sortBy && {
        sortBy: pagination.value.sortBy,
        descending: pagination.value.descending,
      }),
      type:
        storeData.officerType.toLocaleUpperCase() == "OFFICER"
          ? "officer"
          : "employee",
    })
    .then((res) => {
      const result = res.data.result;
      rows.value = result.data;
      pagination.value = {
        ...pagination.value,
        rowsNumber: result.total,
      };
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

/*** ฟังก์ชันสำหรับเปิด Modal และดึงข้อมูลผู้บังคับบัญชา */
function onPerson() {
  modal.value = true;
  getCommander();
}

/*** ฟังก์ชันสำหรับปิด Modal และล้างข้อมูล */
function closeDialog() {
  modal.value = false;
  search.value = "";
  rows.value = [];
  selected.value = [];
  pagination.value = {
    sortBy: "",
    descending: true,
    page: 1,
    rowsPerPage: 10,
    rowsNumber: 0,
  };
}

/** ฟังก์ชันสำหรับยืนยันการเลือกผู้บังคับบัญชา */
function onSubmit() {
  modal.value = false;
  dataStore.dear = selected.value[0].firstName
    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
    : "";

  dataStore.commanderPosition = removeDuplicateWords(
    selected.value[0].positionSign || "",
  );
}

/**
 * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
 * @param requestProps ข้อมูลการร้องขอจากตาราง
 */
function onTableRequest(requestProps: PropsTable.RequestProps) {
  const newPagination = requestProps?.pagination || requestProps;
  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
  pagination.value = { ...newPagination };
  getCommander();
}

/** ฟังก์ชันสำหรับค้นหาข้อมูล*/
function getSearch() {
  pagination.value.page = 1;
  getCommander();
}
</script>

<template>
  <q-card bordered class="q-pa-md bg-grey-1">
    <div class="col-12 row q-pa-sm q-col-gutter-sm items-center">
      <q-input
        v-model="dataStore.dear"
        dense
        outlined
        bg-color="white"
        label="เรียน (ชื่อ - นามสกุล)"
        class="col-4"
      ></q-input>
      <q-input
        v-model="dataStore.commanderPosition"
        dense
        outlined
        bg-color="white"
        label="เรียน (ตำแหน่ง)"
        class="col-4"
      ></q-input>
      <div class="col-4">
        <q-btn
          class="bg-secondary text-white"
          icon="add"
          unelevated
          @click="onPerson"
          ><q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
        >
      </div>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="col-12 row q-pa-sm q-col-gutter-sm">
      <datepicker
        class="col-12 col-sm-6"
        v-model="dataStore.dateSendLeave"
        :locale="'th'"
        autoApply
        borderless
        :enableTimePicker="false"
        week-start="0"
        readonly
      >
        <template #year="{ year }">
          {{ year + 543 }}
        </template>
        <template #year-overlay-value="{ value }">
          {{ parseInt(value + 543) }}
        </template>
        <template #trigger>
          <q-input
            outlined
            dense
            bg-color="white"
            hide-bottom-space
            readonly
            class="full-width"
            :model-value="
              dataStore.dateSendLeave != null
                ? date2Thai(dataStore.dateSendLeave)
                : null
            "
            :label="`${'วันที่ยื่นใบลา'}`"
            :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer inputblack"
                style="color: var(--black)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
      <q-input
        class="col-12 col-sm-6"
        dense
        bg-color="white"
        outlined
        readonly
        v-model="dataStore.typeLeave"
        label="เรื่อง"
      />

      <q-input
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.fullName"
        label="ชื่อผู้ยื่นขอ"
      />
      <q-input
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.positionName"
        label="ตำแหน่งผู้ยื่นขอ"
      />
      <q-input
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.positionLevelName"
        label="ระดับผู้ยื่นขอ"
      />
      <q-input
        class="col-12 text-html"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.organizationName"
        label="สังกัดผู้ยื่นขอ"
      />
      <q-input
        v-if="props.model === 'LV-005'"
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.leaveLimit"
        label="จำนวนสิทธิ์การลาที่ได้รับ"
      />
      <q-input
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.leaveTotal"
        label="จำนวนสิทธิ์การลาที่ใช้ไป"
      />
      <q-input
        v-if="props.model === 'LV-005'"
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.leaveRemain"
        label="จำนวนสิทธิ์การลาคงเหลือ"
      />
    </div>
  </q-card>

  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 80%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader :tittle="`เลือกผู้บังคับบัญชา`" :close="closeDialog" />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <div class="row q-col-gutter-md items-start">
                <div class="col-12 col-sm-6 col-md-4">
                  <q-input
                    v-model="search"
                    outlined
                    hide-bottom-space
                    dense
                    label="คำค้น"
                    @keydown.enter.prevent="getSearch()"
                  />
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                  <q-checkbox
                    keep-color
                    v-model="isAct"
                    label="แสดงเฉพาะรักษาการแทน"
                    color="primary"
                    @update:model-value="getSearch()"
                  >
                    <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
                  </q-checkbox>
                </div>
                <q-space v-if="$q.screen.gt.sm" />

                <div class="col-12 col-md-3">
                  <q-btn
                    color="primary"
                    icon="search"
                    label="ค้นหา"
                    class="full-width q-pa-sm"
                    outline
                    @click.prevent="getSearch()"
                  >
                  </q-btn>
                </div>
              </div>
            </div>
            <div class="col-12">
              <d-table
                ref="table"
                :columns="columns"
                :rows="rows"
                row-key="key"
                flat
                bordered
                :paging="true"
                dense
                :rows-per-page-options="[10, 25, 50, 100]"
                selection="single"
                v-model:pagination="pagination"
                v-model:selected="selected"
                :loading="isLoading"
                @request="onTableRequest"
              >
                <template v-slot:header-selection="scope">
                  <q-checkbox
                    keep-color
                    color="primary"
                    dense
                    v-model="scope.checkBox"
                  />
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th auto-width />
                    <q-th
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <span class="text-weight-medium">{{
                        getColumnLabel(col, isAct)
                      }}</span>
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props" class="cursor-pointer">
                    <q-td>
                      <q-checkbox
                        keep-color
                        color="primary"
                        dense
                        v-model="props.selected"
                      />
                    </q-td>
                    <q-td
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <div v-if="col.name == 'no'">
                        {{ props.rowIndex + 1 }}
                      </div>
                      <div v-else>
                        {{ col.value ? col.value : "-" }}
                      </div>
                    </q-td>
                  </q-tr>
                </template>
              </d-table>
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn
            label="บันทึก"
            color="secondary"
            type="submit"
            :disable="selected.length === 0"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
