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

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

  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const indexOfFirstItem = currentPage;
  const indexOfLastItem = currentPage + itemsPerPage;
  const currentTask = familyData?.data?.result_list?.slice(
    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: {} });
  };

  console.log("Check this >>",continueTaskPopup)

  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>
      ) : (
        <>
          {familyData?.data?.result_list && (
            <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"
                    }`);
                    // console.log("VALUE", value);
                    // 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="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.firstname}
                              </p>
                            </div>
                          </div>
                        </td>
                        <td className="text-right py-4 px-2 flex justify-end">
                          <button
                            onClick={() => openPopUp(value)}
                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                          >
                            {/* View */}
                            <Icons name="right-arrow" />
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
              <PaginatedList
                onClick={handlePagination}
                prev={currentPage === 0}
                next={currentPage + itemsPerPage >= familyData?.data?.result_list?.length}
                data={familyData?.data?.result_list}
                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}
        />
      )}
    </div>
  );
};

export default FamilyNewWaitlist;