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

import { useCounterMixin } from "@/stores/mixin";
import { useDataStoreManage } from "@/modules/06_webservices/stores/manage";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { QTableProps } from "quasar";
import type {
  DataOption,
  Pagination,
} from "@/modules/06_webservices/interface/index/Main";
import type {
  ListSystems,
  ListApiManages,
} from "@/modules/06_webservices/interface/response/Main";

/** importComponents*/
import DialogApi from "@/modules/06_webservices/components/DialogApi.vue";

/** use*/
const $q = useQuasar();
const { systemList } = toRefs(useDataStoreManage());
const {
  dialogRemove,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
} = useCounterMixin();

const systemOptions = ref<DataOption[]>(systemList.value);

/** Table*/
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
const rows = ref<ListApiManages[]>([]); //รายการ webservices
const total = ref<number>(0); //จำนวนรายการทั้งหมด
const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
const keyword = ref<string>(""); //คำค้นหา รายการ webservices
const systemfilter = ref<string>("all"); //ตัวกรองระบบ
const isActive = ref<boolean>(true); //ตัวกรองสถานะ
const visibleColumns = ref<string[]>([
  "system",
  "name",
  "methodApi",
  "pathApi",
  "lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "system",
    align: "left",
    label: "System",
    sortable: true,
    field: "system",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "API Name",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "methodApi",
    align: "left",
    label: "Method",
    sortable: true,
    field: "methodApi",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "pathApi",
    align: "left",
    label: "API Path",
    sortable: true,
    field: "pathApi",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "lastUpdatedAt",
    align: "left",
    label: "updatedAt",
    sortable: true,
    field: "lastUpdatedAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val) {
      return date2Thai(val, false, true);
    },
  },
]);

const modalDialog = ref<boolean>(false); //ตัวแปรเปิดปิด dialog
const isEditData = ref<boolean>(false); //ตัวแปรเช็คว่าเป็นการแก้ไขข้อมูลหรือไม่
const apiId = ref<string>(""); //ตัวแปรเก็บ id ของ api ที่จะแก้ไข

/** ฟังก์ชันดึงข้อมูลรายการระบบ */
async function fetchSystemData() {
  if (systemList.value.length > 1) return; // ถ้ามีข้อมูลแล้วไม่ต้องดึงใหม่
  try {
    const res = await http.get(`${config.API.apiManage}systems`);
    const data = res.data.result;
    const systemData = data.map((item: ListSystems) => ({
      id: item.code,
      name: item.name,
    }));
    systemList.value.push(...systemData);
  } catch (error) {
    messageError(error);
  }
}

/** ฟังก์ชันดึงข้อมูลรายการ API */
async function fetchData() {
  try {
    const queryParams = {
      page: page.value,
      pageSize: pageSize.value,
      keyword: keyword.value,
      system: systemfilter.value === "all" ? "" : systemfilter.value,
      isActive: isActive.value,
    };

    const res = await http.get(`${config.API.apiManage}lists`, {
      params: queryParams,
    });
    const result = res.data.result;
    total.value = result.total;
    maxPage.value = Math.ceil(total.value / pageSize.value);
    rows.value = result.data;
  } catch (error) {
    messageError(error);
  }
}

/**
 * ฟังก์ชันลบข้อมูลรายการ API
 * @param id ID ของ API ที่ต้องการลบ
 */
function onDeleteData(id: string) {
  dialogRemove($q, async () => {
    try {
      showLoader();
      await http.delete(`${config.API.apiManage}${id}`);
      await fetchData();
      success($q, "ลบข้อมูลสำเร็จ");
    } catch (error) {
      messageError($q, error);
    } finally {
      hideLoader();
    }
  });
}

/**
 * ฟังก์ชันแก้ไขข้อมูลรายการ API
 * @param id ID ของ API ที่ต้องการแก้ไข
 */
function onEditData(id: string) {
  isEditData.value = true;
  modalDialog.value = true;
  apiId.value = id; // เก็บ id ของ api ที่จะแก้ไข
}

/** ฟังก์ชันค้นหาข้อมูลในตารางใหม่ */
function onSearchDataTable() {
  page.value = 1; // รีเซ็ตหน้าเป็น 1 เมื่อค้นหาใหม่
  fetchData();
}

/**
 * ฟังก์ชันค้นหาคำใน select
 * @param val คำค้นหา
 * @param update function
 */
function filterSelector(val: string, update: Function) {
  update(() => {
    const newVal = val.toLowerCase();
    systemOptions.value = systemList.value.filter(
      (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
    );
  });
}

/**
 * ฟังก์ชันอัปเดท paging
 * @param initialPagination ข้อมูล pagination
 */
async function updatePagination(initialPagination: Pagination) {
  pageSize.value = initialPagination.rowsPerPage;
}

/** function callback เมื่อมีการเปลี่ยนหน้า*/
watch(
  () => pageSize.value,
  () => {
    onSearchDataTable();
  }
);

/** ทำงานเมื่อ component ถูก mount */
onMounted(async () => {
  try {
    showLoader();
    await fetchSystemData();
    await fetchData();
  } catch (error) {
    messageError(error);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="items-center col-12 row q-col-gutter-sm">
    <div class="items-center row q-col-gutter-sm col-xs-12 col-sm-auto">
      <div class="col-xs-12 col-sm-auto">
        <q-select
          dense
          hide-bottom-space
          outlined
          option-label="name"
          option-value="id"
          emit-value
          map-options
          v-model="systemfilter"
          :options="systemOptions"
          label="ระบบ"
          use-input
          hide-selected
          fill-input
          :clearable="systemfilter !== 'all'"
          @clear="systemfilter = 'all'"
          @filter="(inputValue: string,doneFn: Function) => filterSelector(inputValue, doneFn )"
          @update:model-value="onSearchDataTable"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-xs-12 col-sm-auto">
        <q-btn
          flat
          round
          dense
          color="primary"
          icon="add"
          @click="(modalDialog = true), (isEditData = false)"
        >
          <q-tooltip>สร้าง API Key </q-tooltip>
        </q-btn>
      </div>
    </div>

    <q-space />
    <div class="row q-col-gutter-sm col-xs-12 col-sm-auto">
      <div class="col-xs-12 col-sm-auto">
        <q-toggle
          v-model="isActive"
          :label="`${isActive ? 'Active' : 'Inactive'}`"
          @update:model-value="onSearchDataTable"
        />
      </div>
      <div class="col-xs-12 col-sm-auto">
        <q-input
          borderless
          dense
          outlined
          v-model="keyword"
          placeholder="ค้นหาชื่อ API"
          @keydown.enter.prevent="onSearchDataTable"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </div>
      <div class="col-xs-12 col-sm-auto">
        <q-select
          v-model="visibleColumns"
          multiple
          outlined
          dense
          options-dense
          :display-value="$q.lang.table.columns"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          style="min-width: 140px"
        />
      </div>
    </div>
  </div>

  <!-- Table -->
  <div class="col-12 q-pt-sm">
    <d-table
      ref="table"
      :columns="columns"
      :rows="rows"
      row-key="id"
      flat
      bordered
      :paging="true"
      dense
      :rows-per-page-options="[10, 25, 50, 100]"
      :visible-columns="visibleColumns"
      @update:pagination="updatePagination"
    >
      <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">{{ col.label }}</span>
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn
              dense
              flat
              round
              color="edit"
              @click="onEditData(props.row.id)"
              icon="mdi-square-edit-outline"
            >
              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
            </q-btn>
            <q-btn
              dense
              flat
              round
              color="red"
              @click="onDeleteData(props.row.id)"
              icon="delete"
            >
              <q-tooltip>ลบข้อมูล</q-tooltip>
            </q-btn>
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <div v-html="col.value ? col.value : '-'"></div>

            <div></div>
          </q-td>
        </q-tr>
      </template>

      <template v-slot:pagination="scope">
        ทั้งหมด {{ total }} รายการ
        <q-pagination
          v-model="page"
          active-color="primary"
          color="dark"
          :max="Number(maxPage)"
          size="sm"
          boundary-links
          direction-links
          :max-pages="5"
          @update:model-value="fetchData"
        ></q-pagination>
      </template>
    </d-table>
  </div>

  <DialogApi
    v-model:modal="modalDialog"
    :is-edit="isEditData"
    :api-id="apiId"
    :fetch-data="fetchData"
  />
</template>

<style scoped></style>
