import { defineStore } from "pinia";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";

import type { DataOption } from "@/modules/09_leave/interface/index/Main";
import type { QTableProps } from "quasar";
import type { DataRows } from "@/modules/09_leave/interface/response/leave";

const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader } = mixin;
export const useLeavelistDataStore = defineStore("leave", () => {
  //TABMENU
  const tab = ref<string>("1");
  const amounttab1 = ref<number>(0);
  const amounttab2 = ref<number>(0);
  //ข้อมูลในตาราง
  const mainData = ref<any>([]);
  const rows = ref<DataRows[]>([]);
  const columns = ref<QTableProps["columns"]>([]);
  const visibleColumns = ref<string[]>([]);
  const loadTable = ref<boolean>(false);
  async function fetchList(data: DataRows[]) {
    let datalist = data.map((e: DataRows) => ({
      leaveType: e.leaveType,
      name: e.name,
      Date: e.Date,
      status: convertSatatus(e.status),
    }));
    tab.value !== "1"
      ? (mainData.value = datalist)
      : (mainData.value = datalist.filter(
          (e) => e.status === "อยู่ระหว่างกำเนินการ"
        ));
    const filteramounttab1 = datalist.filter(
      (e) => e.status === "อยู่ระหว่างกำเนินการ"
    );
    amounttab1.value = filteramounttab1.length;
    amounttab2.value = datalist.length;
    await fetchOption();
    await searchDataFn(selectType.value, selectStatus.value);
  }
  //filter table
  const selectYear = ref<string>("all");
  const selectType = ref<string>("all");
  const selectStatus = ref<string>("all");
  const optionYear = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
  const optionType = ref<DataOption[]>([]);
  const optionStatus = ref<DataOption[]>([]);
  const optionTypeMain = ref<DataOption[]>([]);
  const optionStatusMain = ref<DataOption[]>([]);
  const filterTable = ref<string>("");
  function searchDataFn(type: string, status: string) {
    // selectYear.value = selectYear.value || "all"
    type = type || "all";
    status = status || "all";
    // showLoader()
    loadTable.value = true;
    if (selectYear.value == "all" && type == "all" && status == "all") {
      rows.value = mainData.value;
    } else if (selectYear.value !== "all" && type == "all" && status == "all") {
      console.log("ค้นหาจากปี");
    } else if (selectYear.value == "all" && type !== "all" && status == "all") {
      console.log("ค้นหาจากประเภท");
      rows.value = mainData.value.filter((e: any) => e.leaveType === type);
    } else if (selectYear.value == "all" && type == "all" && status !== "all") {
      console.log("ค้นหาจากสถานะ");
      rows.value = mainData.value.filter((e: any) => e.status === status);
    } else if (
      selectYear.value !== "all" &&
      type !== "all" &&
      status == "all"
    ) {
      console.log("ค้นหาจากปีและประเภท");
    } else if (
      selectYear.value !== "all" &&
      type == "all" &&
      status !== "all"
    ) {
      console.log("ค้นหาจากปีและสถานะ");
    } else if (
      selectYear.value == "all" &&
      type !== "all" &&
      status !== "all"
    ) {
      console.log("ค้นหาจากประเภทและสถานะ");
      rows.value = mainData.value.filter(
        (e: any) => e.leaveType === type && e.status === status
      );
    } else console.log("ค้นหาจากทั้งหมด");
    setTimeout(function () {
      loadTable.value = false;
    }, 500);
  }
  function clearFilter() {
    selectYear.value = "all";
    selectType.value = "all";
    selectStatus.value = "all";
    filterTable.value = "";
  }

  function fetchOption() {
    let data = [];
    data = mainData.value;
    const double_leaveType = [
      ...new Set(data.map((item: any) => item.leaveType)),
    ];
    // หา optionType
    optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
    for (let i = 1; i <= double_leaveType.length; i++) {
      const type = double_leaveType[i - 1];
      if (typeof type === "string") {
        const listtype: DataOption = {
          id: type,
          name: type,
        };
        optionTypeMain.value.push(listtype);
        optionType.value = optionTypeMain.value;
      }
    }
    // หา optionStatus
    const double_status = [...new Set(data.map((item: any) => item.status))];
    optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
    for (let i = 1; i <= double_status.length; i++) {
      const status = double_status[i - 1];
      if (typeof status === "string") {
        const liststatus: DataOption = {
          id: status,
          name: status,
        };
        optionStatusMain.value.push(liststatus);
        optionStatus.value = optionStatusMain.value;
      }
    }
  }
  // filter option
  function filterOption(val: string, update: any, type: string) {
    let data: DataOption[] = [];
    let filter: DataOption[] = [];
    if (type == "type") {
      data = optionTypeMain.value;
    } else if (type == "status") {
      data = optionStatusMain.value;
    }
    if (val == "") {
      update(() => {
        filter = data;
      });
    } else {
      update(() => {
        filter = data.filter((e) => e.name.search(val) !== -1);
      });
    }
    if (filter) {
      if (type == "type") {
        optionType.value = filter;
      } else if (type == "status") {
        optionStatus.value = filter;
      }
    }
  }

  // convertSatatus
  function convertSatatus(val: string) {
    switch (val) {
      case "1":
        return "ใหม่";
      case "2":
        return "อยู่ระหว่างกำเนินการ";
      case "3":
        return "อนุมัติ";
    }
  }
  return {
    tab,
    amounttab1,
    amounttab2,
    //ข้อมูลในตาราง
    rows,
    fetchList,
    loadTable,
    columns,
    visibleColumns,

    //filter table
    filterTable,
    selectYear,
    selectType,
    selectStatus,
    optionYear,
    optionType,
    optionStatus,
    clearFilter,
    searchDataFn,
    filterOption,
  };
});