import { ref, computed, reactive } from "vue";
import { defineStore } from "pinia";

import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useCounterMixin } from "./mixin";
import type { ProfileData, DataProfile } from "@/interface/Main";
import type { MenuMainList } from "@/modules/01_dashboard/interface/Main";

export const useDataStore = defineStore("dataMain", () => {
  const isLoadingMenu = ref<boolean>(false);
  const isLoadingProfile = ref<boolean>(false);
  const dataProfile = ref<any>();
  const storeRegistry = useRegistryInFormationStore();
  const $q = useQuasar();
  const mixin = useCounterMixin();
  const { messageError, showLoader, hideLoader, findPosMasterNo, findOrgName } =
    mixin;
  // ref() คือการประกาศ state เหมือน vuex
  const profileId = ref<string>("");
  const dataprofilePosition = ref<DataProfile | undefined>(undefined);
  const formData = reactive<ProfileData>({
    profileId: "",
    rank: "",
    prefix: "",
    firstName: "",
    lastName: "",
    position: "",
    posExecutiveName: "",
    posTypeName: "",
    posLevelName: "",
    salary: null,
    birthDate: "",
    keycloakId: "",
    posNo: "",
    org: "",
    dateStart: "",
    dateRetireLaw: "",
  });
  const count = ref<number>(0);
  const loader = ref<boolean>(false);
  const isProbation = ref<boolean>(false);
  const profileImg = ref<string>("");
  const expandedReport2 = ref<string[]>([]);
  const selectedReport2 = ref<string>("");
  const officerType = ref<string>("");
  const officerLink = ref<string>("");

  const expandedRegister = ref<string[]>([]);
  const selectedRegister = ref<string>("");
  // computed() คือการประกาศ getters เหมือน vuex
  const doubleCount = computed(() => count.value * 2);
  // function() คือการประกาศ actions เหมือน vuex
  const increment = () => {
    count.value++;
  };
  //  tabData เป็น paramert ใช้เปรียนเทียบ tab ให้ active
  const tabData = ref<string>("");
  /**
   * active tab หน้า รายละเอียดทะเบียนประวัติ
   * @param val string เป็นชื่อของ ตัวนั้นๆ
   */
  const changeTab = (val: string) => {
    tabData.value = val;
  };

  /**
   * active tab หน้า รายละเอียดทะเบียนประวัติ
   * @param val boolean false = close , true = open
   */
  const loaderPage = (val: boolean) => {
    loader.value = val;
  };

  /**
   * เปิด tree จัดการบัญชี2
   * @param val string เป็นชื่อของ ตัวนั้นๆ
   */
  const changeTreeReport2 = (e: string[], s: string) => {
    expandedReport2.value = e;
    selectedReport2.value = s;
  };

  /**
   * เปิด tree ทะเบียนประวัติ
   * @param val string เป็นชื่อของ ตัวนั้นๆ
   */
  const changeTreeRegister = (e: string[], s: string) => {
    expandedRegister.value = e;
    selectedRegister.value = s;
  };

  async function convertEmType(val: string) {
    switch (val) {
      case "OFFICER":
        return "";
      case "PERM":
      case "TEMP":
        return "-employee";
      default:
        return "";
    }
  }

  async function getData(dataPerson: any) {
    isLoadingProfile.value = true;
    const data = await dataPerson;
    dataprofilePosition.value = data;
    profileId.value = data.profileId;
    isProbation.value = data.isProbation;
    formData.profileId = data.profileId;
    formData.rank = data.rank;
    formData.prefix = data.prefix;
    formData.firstName = data.firstName;
    formData.lastName = data.lastName;
    formData.position = data.position;
    formData.salary = data.salary;
    formData.keycloakId = data.keycloak;
    formData.citizenId = data.citizenId;
    formData.birthDate = data.birthDate;
    formData.posTypeName = data.posTypeName;
    formData.posExecutiveName = data.posExecutiveName;
    formData.posLevelName =
      data.profileType === "EMPLOYEE"
        ? data.posTypeShortName
          ? `${data.posTypeShortName} ${data.posLevelName}`
          : `${data.posLevelName}`
        : data.posLevelName;
    formData.dateStart = data.dateStart;
    formData.dateRetireLaw = data.dateRetireLaw;
    formData.posNo = findPosMasterNo(data);
    formData.org = findOrgName(data);
    storeRegistry.profileId = data.profileId;
    storeRegistry.citizenId = data.citizenId;
    isLoadingProfile.value = false;
  }

  async function getProFileType() {
    isLoadingMenu.value = true;
    if (officerType.value == "") {
      await http
        .get(config.API.proFileType)
        .then(async (res) => {
          const data = await res.data.result;
          officerType.value = data;
        })
        .catch((e) => {
          messageError($q, e);
        });
    }

    isLoadingMenu.value = false;
    return convertEmType(officerType.value);
  }

  // รายการเมนูหลักของระบบ
  const menuDataMain = ref<MenuMainList[]>([
    {
      icon: "mdi-account-group-outline",
      title: "แผนผังองค์กร",
      sub: "ดูแผนผังองค์กร",
      color: "blue-3",
      path: "/organization-chart",
      active: false,
    },
    {
      icon: "mdi-clipboard-account-outline",
      title: "ทะเบียนประวัติ",
      sub: "ข้อมูลทะเบียนประวัติ",
      color: "blue-4",
      path: "/registry",
      active: false,
    },
    {
      icon: "mdi-clipboard-account-outline",
      title: "ประเมินบุคคล",
      sub: "ข้อมูลการประเมินบุคคล",
      color: "lime-4",
      path: "/evaluate",
      active: false,
    },
    {
      icon: "mdi-calendar-account-outline",
      title: "การลา",
      sub: "ดู/ลงเวลา ทำเรื่องลา",
      color: "cyan-3",
      path: "/leave",
      active: false,
    },
    {
      icon: "mdi-folder-account-outline",
      title: "ผลงาน",
      sub: "ดูผลงาน",
      color: "light-green-3",
      path: "/portfolio",
      active: false,
    },
    {
      icon: "mdi-account-arrow-right-outline",
      title: "ขอโอน",
      sub: "ทำเรื่องขอโอนย้าย",
      color: "deep-purple-3",
      path: "/transfer",
      active: false,
    },
    {
      icon: "mdi-scale-balance",
      title: "อุทธรณ์/ร้องทุกข์",
      sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
      color: "green-3",
      path: "/appeal-complain",
      active: false,
    },
    {
      icon: "mdi-account-box-outline",
      title: "ผู้ขอรับการประเมิน (KPI)",
      sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
      color: "red-2",
      path: "/KPI",
      active: false,
    },
    {
      icon: "mdi-elevator",
      title: "ผู้ประเมิน (KPI)",
      sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
      color: "red-2",
      path: "/KPI-evaluator",
      active: false,
    },
    {
      icon: "mdi-school",
      title: "ทุนการศึกษา/ฝึกอบรม",
      sub: "รายการทุนการศึกษา/ฝึกอบรม",
      color: "teal-2",
      path: "/scholarship",
      active: false,
    },
    {
      icon: "mdi-human-handsup",
      title: "การพัฒนารายบุคคล",
      sub: "Individual Development Plan",
      color: "orange-3",
      path: "/IDP",
      active: false,
    },
    {
      icon: "mdi-poll",
      title: "ทดลองปฏิบัติหน้าที่ราชการ",
      sub: "ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น",
      color: "yellow-3",
      path: "/probation-report",
      active: false,
    },
  ]);

  // กรองเมนู ตามประเภทบุคลากร
  const menuList = computed(() => {
    const isOfficer = officerType.value === "OFFICER";
    const conditions: Record<string, boolean> = {
      ทดลองปฏิบัติหน้าที่ราชการ: isProbation.value,
      ประเมินบุคคล: isOfficer,
      ผลงาน: isOfficer,
      ขอโอน: isOfficer,
      "ผู้ขอรับการประเมิน (KPI)": isOfficer,
      "ผู้ประเมิน (KPI)": isOfficer,
      "ทุนการศึกษา/ฝึกอบรม": isOfficer,
      การพัฒนารายบุคคล: isOfficer,
    };

    const data = menuDataMain.value.filter(
      (item: MenuMainList) => conditions[item.title] ?? true,
    );
    return data;
  });

  return {
    count,
    doubleCount,
    increment,
    tabData,
    changeTab,
    loader,
    loaderPage,
    expandedReport2,
    selectedReport2,
    changeTreeReport2,
    expandedRegister,
    selectedRegister,
    changeTreeRegister,
    isProbation,
    officerType,
    convertEmType,
    getData,
    profileImg,
    formData,
    officerLink,
    getProFileType,
    dataProfile,
    profileId,
    dataprofilePosition,
    isLoadingMenu,
    isLoadingProfile,

    menuList,
  };
});

// การเขียนแบบ composition api
// ตัวอย่างการใช้งาน use...Store() ตามชื่อที่ตั้ง

// import { useDataStore } from '@/stores/data'

//storeToRefs ใช้กรณีที่เราจะแปลงค่าเป็น state ใน หน้านั้น

// import { storeToRefs } from 'pinia'

// export default {
//     setup() {
//       const store = useDataStore()

// ***********************************
// พยายามไม่ให้ ชื่อ เหมือนกับ props ** ตัวอย่างปกติ
// const { count, doubleCount, increment } = store
// ***********************************

// ตัวอย่าง แปลงค่า store เป็น state หรือ ref
// const { name, doubleCount } = storeToRefs(store)
// ถ้าเป็น function เรียกแยกอีกทีก็ได้
// const { increment } = store
// ***********************************

//return {
// count,
// doubleCount,
// increment
//       }
//     },
//   }
