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

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
import LoadingSpinner from "../Spinners/LoadingSpinner";

import familyImage from "../../assets/images/no-family-side.png";
import { formatDateString } from "../../lib";
import localImgLoad from "../../lib/localImgLoad";

/**
 * Renders a list of family members that can be managed. 
 * It has its current maximum members at 8 and it comes with pagination and loading spinner functionality.

 * @returns {JSX.Element} - The rendered component.
 */
export default function FamilyTable({
  className,
  familyList,
  loader,
  popUpHandler,
}) {
  const navigate = useNavigate();
  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const currentFamilyList = familyList?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );

  const handleManageClick = (familyMember) => {
    navigate("/manage-family", { state: familyMember });
  };

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

  /**
   * Renders a table row for a family member.
   * @returns {JSX.Element} - The table row component.
   */
  const FamilyRow = ({
    firstname,
    lastname,
    age,
    added,
    last_login,
    task_count,
    family_uid,
    banner,
  }) => {
    // Check for valid dates
    const addedDate = added ? added.split(" ")[0] : "N/A";
    const loginDate = last_login ? formatDateString(last_login) : "N/A";

    return (
      <tr
        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
        key={family_uid}
      >
        <td className="py-4">
          <div className="flex space-x-2 items-center w-full">
            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
              <img
                src={localImgLoad(`images/icons/${banner}`)}
                alt={`Avatar of ${firstname} ${lastname}`}
                className="w-full h-full"
              />
            </div>
            <div className="flex flex-col flex-[0.9]">
              <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                {`${firstname} ${lastname} (${age})`}
              </h1>
              <span className="text-sm text-thin-light-gray">
                Added: <span className="text-purple ml-1">{addedDate}</span>
              </span>
              <span className="text-sm text-thin-light-gray">
                Last Login:{" "}
                <span className="text-purple ml-1">{loginDate}</span>
              </span>
            </div>
          </div>
        </td>
        <td className="text-center py-4 px-2">
          <div className="flex space-x-1 items-center justify-center">
            <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
              {task_count}
            </span>
          </div>
        </td>
        <td className="text-right py-4 px-2 flex items-center justify-center">
          <button
            onClick={() =>
              handleManageClick({
                firstname,
                lastname,
                age,
                added,
                last_login,
                task_count,
                family_uid,
                banner,
              })
            }
            type="button"
            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
            Manage
          </button>
        </td>
      </tr>
    );
  };

  return (
    <div
      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${
        className || ""
      }`}
    >
      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
        {loader ? (
          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
            <LoadingSpinner size="16" color="sky-blue" />
          </div>
        ) : (
          <>
            {familyList?.length > 0 ? (
              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
                <thead className="sticky top-0">
                  <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
                    <th className="py-4">Name</th>
                    <th className="py-4 text-center">No of Tasks</th>
                    <th className="py-4 text-right"></th>
                  </tr>
                </thead>
                <tbody className="h-full">
                  {currentFamilyList?.map((familyMember, index) => {
                    return <FamilyRow key={index} {...familyMember} />;
                  })}
                </tbody>
              </table>
            ) : (
              <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
                <div className="p-2 w-full md:w-1/2">
                  <p className="mb-4 p-3 md:p-16">
                    Add your family, assign tasks, and get the whole team
                    engaged.
                  </p>
                  <button
                    onClick={popUpHandler}
                    type="button"
                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
                  >
                    Add Family
                  </button>
                </div>
                <div className="p-2 w-full md:w-1/2">
                  <img className="w-full" src={familyImage} alt="Add Family" />
                </div>
              </div>
            )}
          </>
        )}
      </div>
      {/* PAGINATION BUTTON */}
      <PaginatedList
        onClick={handlePagination}
        prev={currentPage == 0}
        next={currentPage + itemsPerPage >= familyList.length}
        data={familyList}
        start={indexOfFirstItem}
        stop={indexOfLastItem}
      />
      {/* END OF PAGINATION BUTTON */}
    </div>
  );
}