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

const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
  const [popUp, setPopUp] = useState({ show: false, data: {} });
  const [continueTaskPopup, setContinueTaskPopup] = useState({
    show: false,
    data: {},
  });

  let filteredFamilyData = familyData?.result_list?.filter(
    (data) => data?.family_uid === accountDetails?.family_uid
  );

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

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

  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={() =>
                              setPopUp({
                                show: true,
                                data: { ...value, selectedImage },
                              })
                            }
                            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={() => {
            setPopUp({ show: false, data: {} });
          }}
          continuePopupData={(value) =>
            setContinueTaskPopup({ show: true, data: { ...value } })
          }
          situation={popUp.show}
        />
      )}

      {/* Continue Task */}
      {continueTaskPopup.show && (
        <AssignTaskPopout
          details={continueTaskPopup.data}
          action={() => {
            setContinueTaskPopup({ show: false, data: {} });
          }}
          situation={continueTaskPopup.show}
        />
      )}
    </div>
  );
};

export default FamilyWaitlist;