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, setUpdatePage, jobList, setActiveTask, activeTask }) => {
    const [popUp, setPopUp] = useState({ show: false, data: {} });
    const [continueTaskPopup, setContinueTaskPopup] = useState({
      show: false,
      data: {},
    });
    const filteredFamilyData = useMemo(
      () =>
        familyData?.data?.result_list?.filter(
          (data) => data?.family_uid === accountDetails?.family_uid
        ),
      [familyData.data, 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-[538px] p-3 overflow-hidden rounded-2xl section-shadow ${
          className || ""
        }`}
      >
        {familyData.loading ? (
          <div className="w-full h-full flex justify-center items-center">
            <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
          </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"
                      }`);
                      // let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                      return (
                        <tr
                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                          key={value.uid}
                        >
                          <td className="px-2 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 px-2 py-4">
                            <div className='w-full flex justify-end items-center gap-4'>
                              <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>
                              <button
                                onClick={() => openPopUp(value)}
                                className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                              >
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 11 20"
                                  id="Arrow"
                                  className="w-[0.7rem]"
                                >
                                  <path
                                    fillRule="evenodd"
                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
                                    // fill=""
                                    className="color000000 svgShape fill-[#fff]"
                                  ></path>
                                </svg>
                              </button>
                            </div>
                          </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}
            setUpdatePage={setUpdatePage}
            jobList={jobList}
            setActiveTask={setActiveTask}
            activeTask={activeTask}
          />
        )}
      </div>
    );
  }
);

export default FamilyWaitlist;