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

export const useDataStore = defineStore("data", () => {
  // ref() คือการประกาศ state เหมือน vuex
  const count = ref<number>(0);
  const loader = ref<boolean>(false);

  const expandedReport2 = ref<string[]>([]);
  const selectedReport2 = 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;
  };

  return {
    count,
    doubleCount,
    increment,
    tabData,
    changeTab,
    loader,
    loaderPage,
    expandedReport2,
    selectedReport2,
    changeTreeReport2,
    expandedRegister,
    selectedRegister,
    changeTreeRegister,
  };
});

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