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

import type { DataStatus } from "@/modules/06_retirement/interface/index/Main";

export const useDataStore = defineStore("resign", () => {
  const mainTabs = ref<string>("1");
  const mainTabsEMP = ref<string>("1");
  const baseOptionStatus = ref<DataStatus[]>([
    {
      name: "ใหม่",
      value: "WAITTING",
      group: "1",
    },
    {
      name: "รอดำเนินการ",
      value: "PENDING",
      group: "1",
    },
    {
      name: "อนุมัติ/ยับยั้ง",
      value: "APPROVE",
      group: "1",
    },
    {
      name: "ส่งรายชื่อไปออกคำสั่ง",
      value: "REPORT",
      group: "1",
    },
    {
      name: "รอออกคำสั่ง",
      value: "WAITING",
      group: "1",
    },
    {
      name: "ออกคำสั่งเสร็จสิ้น",
      value: "DONE",
      group: "1",
    },
    {
      name: "กำลังดำเนินการยกเลิก",
      value: "CANCELING",
      group: "1",
    },
    {
      name: "ยกเลิกลาออกสำเร็จ",
      value: "CANCEL",
      group: "1",
    },
    {
      name: "ใหม่",
      value: "WAITTING",
      group: "2",
    },
    {
      name: "รอดำเนินการ",
      value: "PENDING",
      group: "2",
    },
    {
      name: "อนุญาต/ไม่อนุญาต",
      value: "APPROVE",
      group: "2",
    },
    {
      name: "ส่งไปออกคำสั่ง",
      value: "REPORT",
      group: "2",
    },
    {
      name: "รอออกคำสั่ง",
      value: "WAITING",
      group: "2",
    },
    {
      name: "ออกคำสั่งสำเร็จ",
      value: "DONE",
      group: "2",
    },
  ]);

  const formQurey = reactive({
    status: "WAITTING",
    page: 1,
    rowsPerPage: 10,
  });

  const formQureyEMP = reactive({
    status: "WAITTING",
    page: 1,
    rowsPerPage: 10,
  });

  const optionStatus = computed(() => {
    return baseOptionStatus.value.filter(
      (option) => option.group === mainTabs.value
    );
  });
  const optionStatusEMP = computed(() => {
    return baseOptionStatus.value.filter(
      (option) => option.group === mainTabsEMP.value
    );
  });

  watch(mainTabs, (val) => {
    formQurey.status = "WAITTING";
  });
  watch(mainTabsEMP, (val) => {
    formQureyEMP.status = "WAITTING";
  });

  return {
    mainTabs,
    mainTabsEMP,
    formQurey,
    formQureyEMP,
    optionStatus,
    optionStatusEMP,
  };
});
