import { defineStore } from "pinia";
import { ref } from "vue";
import { useQuasar } from "quasar";

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

import type { QTableProps } from "quasar";
import type {
  DataListCommand,
  DataCommandType,
} from "@/modules/18_command/interface/response/Main";

const { date2Thai } = useCounterMixin();

export const useCommandListStore = defineStore("commandListStore", () => {
  const tabsMain = ref<string>("DRAFT");
  const rows = ref<DataListCommand[]>([]);
  const columns = ref<QTableProps["columns"]>([
    {
      name: "commandNo",
      align: "left",
      label: "เลขที่คำสั่ง",
      sortable: true,
      field: "commandNo",
      format(val, row) {
        return val
          ? row.commandType !== "C-PM-47"
            ? `${val}/${row.commandYear + 543}`
            : `${val}`
          : "-";
      },
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "issue",
      align: "left",
      label: "ชื่อคำสั่ง",
      sortable: true,
      field: "issue",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "commandAffectDate",
      align: "left",
      label: "วันที่ลงนาม",
      sortable: true,
      field: "commandAffectDate",
      format(val) {
        return val ? date2Thai(val) : "-";
      },
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "commandExcecuteDate",
      align: "left",
      label: "วันที่คำสั่งมีผล",
      sortable: true,
      field: "commandExcecuteDate",
      format(val) {
        return val ? date2Thai(val) : "-";
      },
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "createdFullName",
      align: "left",
      label: "ผู้สร้าง",
      sortable: true,
      field: "createdFullName",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "assignFullName",
      align: "left",
      label: "ผู้ลงนาม",
      sortable: false,
      field: "assignFullName",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
  ]);
  const visibleColumns = ref<string[]>([
    "commandNo",
    "issue",
    "commandAffectDate",
    "commandExcecuteDate",
    "createdFullName",
    "assignFullName",
  ]);
  const total = ref<number>(0);
  const maxPage = ref<number>(0);

  const listCommand = ref<DataCommandType[]>([]); //รายการข้อมูลปรเภทคำสั่ง

  /**
   * ฟังก์ชันดึงข้อมูลปรเภทคำสั่งจาก API
   * ถ้า 'listCommand' ยังไม่มีข้อมูล จะเรียก Call API เพื่อดึงข้อมูลประเภทคำสั่ง
   * @returns รายการประเภทคำสั่ง
   */
  async function fetchCommandType() {
    //เช็คค่าของ listCommand
    if (listCommand.value.length === 0) {
      try {
        const res = await http.get(config.API.commandType);
        const data = res.data.result;

        listCommand.value = data.map((e: DataCommandType) => ({
          id: e.id,
          name: e.subtitle ? `${e.name} (${e.subtitle})` : e.name,
        }));

        return listCommand.value;
      } catch (err) {
        console.log(err);
      }
    } else {
      return listCommand.value;
    }
  }

  return {
    tabsMain,
    rows,
    columns,
    visibleColumns,
    total,
    maxPage,
    fetchCommandType,
  };
});
