tsms/src/components/EditStaff/EditStaff.tsx

"use client";
import EditStaffForm from "../EditStaffForm";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { BASE_API_URL } from "@/config/api";
import { fetchStaffEdit } from "@/app/api/staff/actions";
import { getServerI18n } from "@/i18n";
import { useTranslation } from "react-i18next";
import { comboProp, fetchCompanyCombo } from "@/app/api/companys/actions";
import { fetchTeamCombo } from "@/app/api/team/actions";
import { fetchDepartmentCombo } from "@/app/api/departments/actions";
import { fetchPositionCombo } from "@/app/api/positions/actions";
import { fetchGradeCombo } from "@/app/api/grades/actions";
import { fetchSkillCombo } from "@/app/api/skill/actions";
import { fetchSalaryCombo } from "@/app/api/salarys/actions";
// import { Field } from "react-hook-form";

interface dataType {
  [key: string]: any;
}

interface Options {
  id: any;
  label: string;
  [key: string]: any;
}
// interface Field {
//   id: string;
//   label: string;
//   type: string;
//   value: any;
//   required?: boolean;
//   options?: comboProp[] | undefined | null;
//   readOnly?: boolean;
// }

export interface Field {
  //   subtitle: string;
  id: string;
  label: string;
  type: string;
  value?: any;
  required?: boolean;
  pattern?: string;
  message?: string;
  options?: Options[] | null;
  readOnly?: boolean;
  size?: number;
  setValue?: any[];
}

const EditStaff: React.FC = async () => {
  const searchParams = useSearchParams();
  const { t } = useTranslation();
  const idString = searchParams.get("id");
  const [id, setId] = useState(0);
  const [fieldLists, setFieldLists] = useState<Field[][]>();
  const [companyCombo, setCompanyCombo] = useState<comboProp[]>();
  const [teamCombo, setTeamCombo] = useState<comboProp[]>();
  const [departmentCombo, setDepartmentCombo] = useState<comboProp[]>();
  const [positionCombo, setPositionCombo] = useState<comboProp[]>();
  const [gradeCombo, setGradeCombo] = useState<comboProp[]>();
  const [skillCombo, setSkillCombo] = useState<comboProp[]>();
  const [salaryCombo, setSalaryCombo] = useState<comboProp[]>();
  //   const employTypeCombo = [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}];
  const title = ["", t('Additional Info')]
  const employTypeCombo = [
    { id: "FT", label: t("FT") },
    { id: "PT", label: t("PT") },
  ];
  const keyOrder1 = [
    "staffId",
    "name",
    "company",
    "team",
    "department",
    "grade",
    "skill",
    "currentPosition",
    "salary",
    "hourlyRate",
    "employType",
    "email",
    "phone1",
    "phone2",
  ];

  const keyOrder2 = [
    "emergContactName",
    "emergContactPhone",
    "joinDate",
    "joinPosition",
    "departDate",
    "departPosition",
    "departReason",
    "remark",
  ];

  //fetch all combo
  useEffect(() => {
    fetchCompanyCombo().then((data) => {
      if (data) setCompanyCombo(data.records);
    });
    fetchTeamCombo().then((data) => {
      if (data) setTeamCombo(data.records);
    });
    fetchDepartmentCombo().then((data) => {
      if (data) setDepartmentCombo(data.records);
    });
    fetchPositionCombo().then((data) => {
      if (data) setPositionCombo(data.records);
    });
    fetchGradeCombo().then((data) => {
      if (data) setGradeCombo(data.records);
    });
    fetchSkillCombo().then((data) => {
      if (data) setSkillCombo(data.records);
    });
    fetchSalaryCombo().then((data) => {
      if (data) setSalaryCombo(data.records);
    });
  }, [searchParams]);

  useEffect(() => {
    let id = 0;
    if (idString) {
      id = parseInt(idString);
      setId(id);
    }
    fetchStaffEdit(id).then((staff) => {
      console.log(staff.data);
      const data = staff.data;
      ///////////////////// list 1 /////////////////////
      const list1 = keyOrder1
        .map((key) => {
          switch (key) {
            case "staffId":
              return {
                id: `${key}`,
                label: t(`Staff ID`),
                type: "text",
                value: data[key] ?? "",
                required: true,
              };
            case "name":
              return {
                id: `${key}`,
                label: t(`Staff Name`),
                type: "text",
                value: data[key] ?? "",
              };
            case "company":
              return {
                id: `${key}Id`,
                label: t(`Company`),
                type: "combo-Obj",
                options: companyCombo,
                value: data[key].id ?? "",
              };
            case "team":
              return {
                id: `${key}Id`,
                label: t(`Team`),
                type: "combo-Obj",
                options: teamCombo,
                value: data[key].id ?? "",
              };
            case "department":
              return {
                id: `${key}Id`,
                label: t(`Department`),
                type: "combo-Obj",
                options: departmentCombo,
                value: data[key]?.id ?? "",
                // later check
              };
            case "grade":
              return {
                id: `${key}Id`,
                label: t(`Grade`),
                type: "combo-Obj",
                options: gradeCombo,
                value: data[key] !== null ? data[key].id ?? "" : "",
              };
            case "skill":
              return {
                id: `${key}SetId`,
                label: t(`Skillset`),
                type: "combo-Obj",
                options: skillCombo,
                value: data[key] !== null ? data[key].id ?? "" : "",
              };
            case "currentPosition":
              return {
                id: `${key}Id`,
                label: t(`Current Position`),
                type: "combo-Obj",
                options: positionCombo,
                value: data[key].id ?? "",
              };
            case "salary":
              return {
                id: `salaryId`,
                label: t(`Salary Point`),
                type: "combo-Obj",
                options: salaryCombo,
                value: data[key] !== null ? data[key].id ?? "" : "",
              };
            // case "hourlyRate":
            //   return {
            //     id: `${key}`,
            //     label: t(`hourlyRate`),
            //     type: "text",
            //     value: "",
            //     // value: data[key],
            //     readOnly: true,
            //   };
            case "employType":
              return {
                id: `${key}`,
                label: t(`Employ Type`),
                type: "combo-Obj",
                options: employTypeCombo,
                value: data[key] ?? "",
              };
            case "email":
              return {
                id: `${key}`,
                label: t(`Email`),
                type: "text",
                value: data[key] ?? "",
                pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$",
                message: t("input matching format"),
              };
            case "phone1":
              return {
                id: `${key}`,
                label: t(`Phone1`),
                type: "text",
                // pattern: "^\\d{8}$",
                message: t("input correct phone no."),
                value: data[key] ?? "",
              };
            case "phone2":
              return {
                id: `${key}`,
                label: t(`Phone2`),
                type: "text",
                // pattern: "^\\d{8}$",
                message: t("input correct phone no."),
                value: data[key] ?? "",
              } as Field;
            default:
              return null;
          }
        }).filter((item): item is Field => item !== null);
        ///////////////////// list 2 /////////////////////
      const list2 = keyOrder2
        .map((key) => {
          switch (key) {
            case "emergContactName":
              return {
                id: `${key}`,
                label: t(`Emergency Contact Name`),
                type: "text",
                value: data[key] ?? "",
              } as Field;
            case "emergContactPhone":
                return {
                  id: `${key}`,
                  label: t(`Emergency Contact Phonee`),
                  type: "text",
                  // pattern: "^\\d{8}$",
                  message: t("input correct phone no."),
                  value: data[key] ?? "",
                } as Field;
            case "joinDate":
              return {
                id: `${key}`,
                label: t(`Join Date`),
                type: "multiDate",
                value: data[key] ?? "",
              } as Field;
            case "joinPosition":
              return {
                id: `${key}Id`,
                label: t(`Join Position`),
                type: "combo-Obj",
                options: positionCombo,
                value: data[key].id ?? "",
              } as Field;
            case "departDate":
              return {
                id: `${key}`,
                label: t(`Depart Date`),
                type: "multiDate",
                value: data[key] ?? "",
              } as Field;
            case "departReason":
              return {
                id: `${key}`,
                label: t(`Depart Reason`),
                type: "text",
                value: data[key] ?? "",
              } as Field;
            case "remark":
              return {
                id: `remark`,
                label: t(`Remark`),
                type: "remarks",
                value: data[key] ?? "",
              } as Field;
            default:
              return null;
          }
        }).filter((item): item is Field => item !== null);
      console.log(list2);
      console.log([list1]);
      setFieldLists([list1,list2]);
    });
  }, [companyCombo]);

  return (
    <>
    {/* {console.log(fieldLists)} */}
      <EditStaffForm Title={title} id={id} fieldLists={fieldLists as Field[][] || [[]]} />
    </>
  );
};

export default EditStaff;