Users-Wrench/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

import { memo, useMemo, useState } from "react";
import SuggestTask from "../../FamilyPopup/SuggestTask";
import { PaginatedList, handlePagingFunc } from "../../Pagination";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";

const FamilyWaitlist = memo(
  ({ familyData, className, accountDetails, loader }) => {
    const [popUp, setPopUp] = useState({ show: false, data: {} });
    const [continueTaskPopup, setContinueTaskPopup] = useState({
      show: false,
      data: {},
    });
    const filteredFamilyData = useMemo(
      () =>
        familyData?.result_list?.filter(
          (data) => data?.family_uid === accountDetails?.family_uid
        ),
      [familyData, accountDetails]
    );

    const [currentPage, setCurrentPage] = useState(0);
    const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const indexOfFirstItem = currentPage;
    const indexOfLastItem = currentPage + itemsPerPage;
    const currentTask = useMemo(
      () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
      [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
    );

    const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);

    const openPopUp = (value) => {
      setPopUp({ show: true, data: { ...value } });
    };

    const closePopUp = () => {
      setPopUp({ show: false, data: {} });
    };

    const openContinueTaskPopup = (value) => {
      setContinueTaskPopup({ show: true, data: { ...value } });
    };

    const closeContinueTaskPopup = () => {
      setContinueTaskPopup({ show: false, data: {} });
    };

    return (
      <div
        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
          className || ""
        }`}
      >
        {loader ? (
          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
            <LoadingSpinner size={16} color="sky-blue" />
          </div>
        ) : (
          <>
            {filteredFamilyData && (
              <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                  <tbody>
                    {currentTask.map((value) => {
                      const addedDate = value?.added.split(" ")[0];
                      const selectedImage = require(`../../../assets/images/family/${
                        value?.banner || "default.jpg"
                      }`);
                      return (
                        <tr
                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                          key={value.uid}
                        >
                          <td className="py-4">
                            <div className="w-full flex justify-between items-center">
                              <div className="account-name flex space-x-4 items-center">
                                <div className="icon w-14 h-14 flex justify-center items-center">
                                  <img
                                    src={selectedImage}
                                    alt="task_img"
                                    className="w-full object-cover"
                                  />
                                </div>
                                <div className="">
                                  <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
                                    {value.title}
                                  </p>
                                  <p className="text-sm text-thin-light-gray font-medium">
                                    {value.description}
                                  </p>
                                </div>
                              </div>
                              <div className="px-2 flex flex-col items-center justify-center">
                                <p className="text-sm font-bold text-dark-gray dark:text-white">
                                  {addedDate}
                                </p>
                                <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
                                  {value.status_text}
                                </p>
                              </div>
                            </div>
                          </td>
                          <td className="text-right py-4 px-2">
                            <button
                              onClick={() => openPopUp(value)}
                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                              View
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                <PaginatedList
                  onClick={handlePagination}
                  prev={currentPage === 0}
                  next={
                    currentPage + itemsPerPage >= filteredFamilyData?.length
                  }
                  data={filteredFamilyData}
                  start={indexOfFirstItem}
                  stop={indexOfLastItem}
                />
              </div>
            )}
          </>
        )}
        {popUp.show && (
          <SuggestTask
            details={popUp.data}
            onClose={closePopUp}
            continuePopupData={openContinueTaskPopup}
            situation={popUp.show}
          />
        )}

        {continueTaskPopup.show && (
          <AssignTaskPopout
            details={continueTaskPopup.data}
            action={closeContinueTaskPopup}
            situation={continueTaskPopup.show}
          />
        )}
      </div>
    );
  }
);

export default FamilyWaitlist;