import React, { useState } from "react";
import dataImage2 from "../../../assets/images/data-table-user-2.png";
import { useNavigate, useLocation } from "react-router-dom";
import { handlePagingFunc } from "../../Pagination/HandlePagination";
import PaginatedList from "../../Pagination/PaginatedList";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import Icons from "../../Helpers/Icons";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import ModalCom from "../../Helpers/ModalCom";
import Detail from "../../jobPopout/popoutcomponent/Detail";


export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
  let navigate = useNavigate();
  let { pathname } = useLocation();

  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const currentTask = familyData?.result_list.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>
      ) : (
        <>
          {familyData && familyData?.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>
                  {
                    <>
                      {familyData &&
                        familyData?.result_list &&
                        familyData.result_list.length > 0 &&
                        currentTask.map((value, index) => {
                          // find due date
                          const dueDate = value?.delivery_date.split(" ")[0];
                          // the price
                          let thePrice = PriceFormatter(
                            value?.price * 0.01,
                            value?.currency_code,
                            value?.currency
                          );
                          return (
                            <tr
                              key={index}
                              className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                            >
                              <td className=" py-4">
                                <div className="flex space-x-2 items-center w-full">
                                  <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]">
                                    <img
                                      src={dataImage2}
                                      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">
                                      {value.title}
                                    </h1>
                                    <div className="flex gap-4 items-center">
                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                        Price:{" "}
                                        <span className="text-purple">
                                          {thePrice}
                                        </span>
                                      </span>
                                      <span className="text-sm text-thin-light-gray">
                                        Duration:{" "}
                                        <span className="text-purple">
                                          {" "}
                                          {value.timeline_days} day(s)
                                        </span>
                                      </span>
                                      <span className="text-sm text-thin-light-gray">
                                        Due Date:{" "}
                                        <span className="text-purple">
                                          {" "}
                                          {dueDate}
                                        </span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </td>

                              <td className="text-right py-4 px-2">
                                <button
                                  type="button"
                                  onClick={() => {
                                    navigate("/manage-active-job", {
                                      state: {
                                        ...value,
                                        pathname,
                                        accountDetails
                                      }
                                    });
                                  }}
                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                >
                                  <Icons name="right-arrow" />
                                </button>
                              </td>
                            </tr>
                          );
                        })}
                    </>
                  }
                </tbody>
              </table>
              {/* PAGINATION BUTTON */}
              <PaginatedList
                onClick={handlePagination}
                prev={currentPage == 0 ? true : false}
                next={
                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
                  familyData?.result_list.length
                    ? true
                    : false
                }
                data={familyData?.result_list}
                start={indexOfFirstItem}
                stop={indexOfLastItem}
              />
              {/* END OF PAGINATION BUTTON */}
            </div>
          )}
        </>
      )}
    </div>
  );
}