import { ref } from "vue";
import { defineStore } from "pinia";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

import type {
  DataOption,
  InformationOps,
} from "@/modules/04_registryNew/interface/index/Main";
// import type {
//   Gender,
//   Religion,
//   Relationship,
//   BloodGroup,
// } from "@/modules/04_registryNew/interface/response/Profile";

export const useProfileDataStore = defineStore("profile", () => {
  const $q = useQuasar();
  const mixin = useCounterMixin();
  const {
    showLoader,
    hideLoader,
    date2Thai,
    messageError,
    convertDate,
    dateToISO,
  } = mixin;

  const Ops = ref<InformationOps>({
    prefixOps: [],
    prefixOldOps: [],
    genderOps: [],
    bloodOps: [],
    statusOps: [],
    religionOps: [],
    employeeClassOps: [
      { id: "perm", name: "ลูกจ้างประจำ" },
      { id: "temp", name: "ลูกจ้างชั่วคราว" },
    ],
    employeeTypeOps: [
      { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
      { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
    ],
  });

  const OpsFilter = ref<InformationOps>({
    prefixOps: [],
    prefixOldOps: [],
    genderOps: [],
    bloodOps: [],
    statusOps: [],
    religionOps: [],
    employeeClassOps: [
      { id: "perm", name: "ลูกจ้างประจำ" },
      { id: "temp", name: "ลูกจ้างชั่วคราว" },
    ],
    employeeTypeOps: [
      { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
      { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
    ],
  });

  // const genderOp = ref<Gender[]>([]);
  // const religionOp = ref<Religion[]>([]);
  // const relationshipOp = ref<Relationship[]>([]);
  // const bloodGroupOp = ref<BloodGroup[]>([]);
  // const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);

  function calculateAge(birthDate: Date): string {
    const birthDateTimeStamp = new Date(birthDate).getTime();
    const now = new Date();
    const diff = now.getTime() - birthDateTimeStamp;

    const ageDate = new Date(diff);
    const years = ageDate.getUTCFullYear() - 1970;
    const months = ageDate.getUTCMonth();
    const days = ageDate.getUTCDate() - 1;

    if (years > 60) {
      return "อายุเกิน 60 ปี";
    }

    return `${years} ปี ${months} เดือน ${days} วัน`;
  }

  const fetchPerson = async () => {
    showLoader();
    await http
      .get(config.API.person)
      .then((res) => {
        const data = res.data.result;
        let optionbloodGroups: DataOption[] = [];
        data.bloodGroups.map((r: any) => {
          optionbloodGroups.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        Ops.value.bloodOps = optionbloodGroups;
        OpsFilter.value.bloodOps = optionbloodGroups;

        let optiongenders: DataOption[] = [];
        data.genders.map((r: any) => {
          optiongenders.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        Ops.value.genderOps = optiongenders;
        OpsFilter.value.genderOps = optiongenders;

        let optionprefixs: DataOption[] = [];
        data.prefixs.map((r: any) => {
          optionprefixs.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        Ops.value.prefixOps = optionprefixs;
        OpsFilter.value.prefixOps = optionprefixs;

        let optionrelationships: DataOption[] = [];
        data.relationships.map((r: any) => {
          optionrelationships.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        Ops.value.statusOps = optionrelationships;
        OpsFilter.value.statusOps = optionrelationships;

        let optionreligions: DataOption[] = [];
        data.religions.map((r: any) => {
          optionreligions.push({
            id: r.id.toString(),
            name: r.name.toString(),
          });
        });
        Ops.value.religionOps = optionreligions;
        OpsFilter.value.religionOps = optionreligions;
      })
      .catch((e: any) => {})
      .finally(() => {
        hideLoader();
      });
  };

  const filterSelector = (val: any, update: Function, refData: string) => {
    switch (refData) {
      case "prefixOps":
        update(() => {
          Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
      case "genderOps":
        update(() => {
          Ops.value.genderOps = OpsFilter.value.genderOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
      case "bloodOps":
        update(() => {
          Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
      case "statusOps":
        update(() => {
          Ops.value.statusOps = OpsFilter.value.statusOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
      case "religionOps":
        update(() => {
          Ops.value.religionOps = OpsFilter.value.religionOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
      case "employeeClassOps":
        update(() => {
          Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
      case "employeeTypeOps":
        update(() => {
          Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
        });
        break;
  
      default:
        break;
    }
  };

  // async function getGender() {
  //   showLoader();
  //   await http
  //     .get(config.API.profileNewGender)
  //     .then((res) => {
  //       genderOp.value = res.data.result;
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
  // }

  // async function getRelationship() {
  //   showLoader();
  //   await http
  //     .get(config.API.profileNewRelationship)
  //     .then((res) => {
  //       relationshipOp.value = res.data.result;
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
  // }

  // async function getReligion() {
  //   showLoader();
  //   await http
  //     .get(config.API.profileNewReligion)
  //     .then((res) => {
  //       religionOp.value = res.data.result;
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
  // }

  // async function getBloodGroup() {
  //   showLoader();
  //   await http
  //     .get(config.API.profileNewBloodGroup)
  //     .then((res) => {
  //       bloodGroupOp.value = res.data.result;
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(() => {
  //       hideLoader();
  //     });
  // }

  return {
    Ops,
    OpsFilter,
    // prefixOp,
    // genderOp,
    // religionOp,
    // relationshipOp,
    // bloodGroupOp,

    calculateAge,
    fetchPerson,
    filterSelector,
    // getGender,
    // getRelationship,
    // getReligion,
    // getBloodGroup,
  };
});