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";

export default function FamilyTable({
  className,
  familyList,
  loader,
  popUpHandler,
}) {
  const navigate = useNavigate();

  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const currentFamilyList = familyList?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );

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

  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] ${
        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">Last Login</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((props, idx) => {
                let {
                  firstname,
                  lastname,
                  age,
                  added,
                  last_login,
                  task_count,
                  family_uid,
                  banner,
                } = props;
                let addedDate = added?.split(" ")[0];
                let LoginDate =
                  last_login === ""
                    ? "never logged in"
                    : formatDateString(last_login);
                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={dataImage1}
                            src={localImgLoad(`images/icons/${banner}`)}
                            alt="data"
                            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">
                                {LoginDate}
                              </span>
                            </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={() => {
                          navigate("/manage-family", {
                            state: { ...props },
                          });
                        }}
                        type="button"
                        className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                      >
                        Manage
                      </button>
                    </td>
                  </tr>
                );
              })}
            </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 ? true : false}
        next={
          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
          familyList?.length
            ? true
            : false
        }
        data={familyList}
        start={indexOfFirstItem}
        stop={indexOfLastItem}
      />
      {/* END OF PAGINATION BUTTON */}
    </div>
  );
}