import { ref, computed, reactive } from "vue";
import { defineStore } from "pinia";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";

export const useDataStore = defineStore("data", () => {
  const storeRegistry = useRegistryInFormationStore();

  // ref() คือการประกาศ state เหมือน vuex
  const formData = reactive<any>({
    prefix: "",
    firstName: "",
    lastName: "",
    position: "",
    posExecutiveName: "",
    posTypeName: "",
    posLevelName: "",
    posNo: "",
  });
  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) {
    const data = await dataPerson;
    isProbation.value = data.isProbation;
    officerType.value = data.type;
    officerLink.value = await convertEmType(data.type)
    formData.prefix = data.prefix;
    formData.firstName = data.firstName;
    formData.lastName = data.lastName;
    formData.position = data.position;

    formData.posTypeName = data.posTypeName;
    formData.posExecutiveName = data.posExecutiveName;
    formData.posLevelName = data.posLevelName;
    formData.posNo = data.rootShortName
      ? `${data.rootShortName}${data.posMaster}`
      : "";
    storeRegistry.profileId = data.profileId;
  }
  return {
    count,
    doubleCount,
    increment,
    tabData,
    changeTab,
    loader,
    loaderPage,
    expandedReport2,
    selectedReport2,
    changeTreeReport2,
    expandedRegister,
    selectedRegister,
    changeTreeRegister,
    isProbation,
    officerType,
    convertEmType,
    getData,
    profileImg,
    formData,
    officerLink
  };
});

// การเขียนแบบ 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
//       }
//     },
//   }