Users-Wrench/src/components/FamilyAcc/FamilyTableNew.jsx

import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
import { apiConst } from "../../lib/apiConst";
import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";

// Lazy Imports for components
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));

export default function FamilyTableNew({
  className,
  accountDetails,
  listReload,
  loader,
}) {
  // Initial state for family details
  const initialDetailState = {
    loading: false,
    data: null,
  };
  // console.log('accountDetails',accountDetails)
  // State for family details, tasks, waitlist, and pending
  const [details, setDetails] = useState({
    familyDetails: { ...initialDetailState },
    familyTasks: { ...initialDetailState },
    familyWaitList: { ...initialDetailState },
    familyPending: { ...initialDetailState },
  });

  // Function to reset family details, tasks, waitlist, and pending
  const resetDetails = () => {
    setDetails({
      familyDetails: { ...initialDetailState },
      familyTasks: { ...initialDetailState },
      familyWaitList: { ...initialDetailState },
      familyPending: { ...initialDetailState },
    });
  };

  const [updatePage, setUpdatePage] = useState(false); // State to determine when to update the page

  // State for family task data
  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });

  // State for active task
  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });

  // State for error messages
  const [errMsg, setErrMsg] = useState("");

  // State for family task popout
  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);

  // Create an instance of the usersService class
  const apiCall = useMemo(() => new usersService(), []);

  // Function to handle toggling the family task popout
  const familyPopUpHandler = () => {
    setFamilyTaskPopout((prev) => !prev);
  };

  // Array of tab names
  const tabs = [
    { id: 1, name: "Tasks" },
    { id: 2, name: "Waiting" },
    { id: 3, name: "Pending" },
  ];

  // State for the currently selected tab
  const [tab, setTab] = useState(tabs[0].name);

  // Function to handle tab changes
  const tabHandler = (value) => {
    setTab(value);
  };

  // Object that maps tab names to their corresponding components
  const tabComponents = {
    Tasks: (
      <FamilyTasks
        className={className}
        loader={details.familyTasks.loading || false}
        familyData={details.familyTasks.data}
        accountDetails={accountDetails}
      />
    ),
    Waiting: (
      <FamilyWaitlist
        familyData={details.familyWaitList.data}
        accountDetails={accountDetails}
        loader={details.familyWaitList.loading}
      />
    ),
    Pending: (
      <FamilyPending
        familyData={details.familyPending.data}
        accountDetails={accountDetails}
        loader={details.familyPending.loading}
      />
    ),
  };

  const defaultTabComponent = tabComponents.Tasks;

  // Selected tab component based on the current 'tab'
  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;

  // Effect to manage family details and related data
  useEffect(() => {
    const manageFamily = async () => {
      try {
        resetDetails();

        setDetails({
          familyTasks: { loading: true },
          familyWaitList: { loading: true },
          familyPending: { loading: true },
        });

        //   const { family_uid } = accountDetails;
        //   const reqData = { family_uid };

        const [familyTasksData, restOfFamilyData] = await Promise.all([
          apiCall.getMyActiveTaskList(),
          apiCall.ManageFamilyNewWaitlist(),
        ]);

        let tasksData = familyTasksData?.data?.result_list;
        let familyData = restOfFamilyData?.data?.result_list;

        //   const familyData = familyRes.data;
        //   const tasksData = tasksRes.data;

        let familyWaitingData = familyData?.filter(
          (item) => item.status_text === "Waiting"
        );
        let familyPendingData = familyData?.filter(
          (item) => item.status_text !== "Waiting"
        );

        console.log({
          Waitings: familyWaitingData,
          Pending: familyPendingData,
          Tasks: tasksData,
        });

        // Function to check for errors in data
        const checkDataError = (data) => data?.internal_return < 0;

        if (
          checkDataError(tasksData) ||
          checkDataError(familyWaitingData) ||
          checkDataError(familyPendingData)
        ) {
          return;
        }

        setDetails({
          familyTasks: { loading: false, data: tasksData },
          familyWaitList: { loading: false, data: familyWaitingData },
          familyPending: { loading: false, data: familyPendingData },
        });
      } catch (error) {
        resetDetails();
        setErrMsg("An error occurred");
        throw new Error(error);
      }
    };

    // Invoke the manageFamily function when the component mounts
    manageFamily();
  }, [updatePage]);

  // Effect to manage family tasks
  useEffect(() => {
    let checkFamilyTask = true;
    const reqData = {
      limit: 30,
      offset: 0,
      job_type: "FAMILY",
      action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
    };

    if (checkFamilyTask) {
      setFamilyTask({ loading: true });
      apiCall
        .getMyJobList(reqData)
        .then((res) => {
          setFamilyTask({ loading: false, data: res?.data?.result_list });
          if (res?.data?.result_list?.length) {
            setActiveTask((prev) => ({
              ...prev,
              data: res?.data?.result_list[0],
            }));
          }
        })
        .catch((err) => {
          setFamilyTask({ loading: false, data: [] });
          console.log("Error", err);
        });
    }

    // Cleanup function to prevent memory leaks
    return () => {
      checkFamilyTask = false;
    };
  }, []);

  return (
    <div
      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
        className || ""
      }`}
    >
      <div className="relative w-full sm:rounded-lg overflow-x-auto">
        <Suspense
          fallback={
            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
              <LoadingSpinner size="16" color="sky-blue" />
            </div>
          }
        >
          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-3 min-h-[575px]">
            <div className="col-span-3 h-full w-full">
              <div className="flex flex-col w-full">
                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
                  <ul className="flex gap-2 items-center w-full">
                    {tabs.map(({ name, id }) => (
                      <li
                        onClick={() => tabHandler(name)}
                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
                          tab === name
                            ? "text-purple border-r"
                            : "text-thin-light-gray"
                        }`}
                        key={id}
                      >
                        <h1>{name}</h1>
                      </li>
                    ))}
                  </ul>
                  <button
                    type="button"
                    onClick={familyPopUpHandler}
                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                  >
                    Add task
                  </button>
                </div>

                <div className="flex-[0.9] h-full">
                  <div className="h-full relative overflow-y-auto">
                    <Suspense
                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
                    >
                      {selectedTabComponent}
                    </Suspense>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Suspense>
      </div>

      {familyTaskPopout && (
        <AssignTaskPopout
          action={familyPopUpHandler}
          situation={familyTaskPopout}
          familyTask={familyTask}
          setFamilyTask={setFamilyTask}
          setActiveTask={setActiveTask}
          activeTask={activeTask}
          //   familyDetailsData={details.familyDetails.data}
          setUpdatePage={setUpdatePage}
        />
      )}
    </div>
  );
}