import { useCallback, useEffect, useMemo, useState } from "react";
import dataImage2 from "../../assets/images/data-table-user-2.png";
import SelectBox from "../Helpers/SelectBox";
import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
import JobListPopout from "../jobPopout/JobListPopout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import { useSelector } from "react-redux";
import usersService from "../../services/UsersService";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
import EditJobPopOut from "../jobPopout/EditJobPopout";
import { PriceFormatter } from "../Helpers/PriceFormatter";

import EditIcon from '../../assets/images/icon-edit.svg'
import DeleteIcon from '../../assets/images/icon-delete.svg'
import localImgLoad from "../../lib/localImgLoad";

export default function MyJobTable({ MyJobList, reloadJobList, className }) {
  // Getting the categories
  const currentJobCart = MyJobList?.data?.categories;
  // DropDown Box
  const filterCategories = { All: "All Categories", ...currentJobCart };

  const [selectedCategory, setCategory] = useState(
    Object.keys(filterCategories)[0]
  );

  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW

  let [deleteJobPopout, setDeleteJobPopout] = useState({
    show: false,
    data: {},
  }); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
  const [editJob, setEditJob] = useState({ show: false, data: {} });

  const [myCountry, setCountries] = useState("");
  const {
    userDetails: { country },
  } = useSelector((state) => state?.userDetails);

  const userApi = useMemo(() => new usersService(), []);

  // Get Country Api
  const getCountryList = useCallback(async () => {
    const res = await userApi.getSignupCountryData();

    try {
      if (res.status === 200) {
        const {
          data: { signup_country },
        } = await res;
        let checkCountry = signup_country
          ?.filter((item) => item[0] == country)
          ?.map((item, idx) => item[1])
          .join("");
        setCountries(checkCountry);
      }
    } catch (error) {
      throw new Error(error);
    }
  }, [userApi, country]);

  useEffect(() => {
    getCountryList();
  }, [getCountryList]);

  // Handle Pagination
  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);

  // Handle Filter Job List
  const filterJobList = () => {
    if (selectedCategory === "All") return MyJobList?.data?.result_list;
    else
      return MyJobList?.data?.result_list?.filter((item) =>
        item.category.includes(selectedCategory)
      );
  };

  const currentJobList = filterJobList();

  // Handling Filter Pagination
  const filteredCurrentJobList = currentJobList?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );

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

  // Handles the category selection
  const handleSetCategory = (value) => {
    setCurrentPage(0);
    for (let i in filterCategories) {
      if (filterCategories[i] == value) {
        setCategory(i);
      }
    }
  };

  const JobListItem = ({ value, index }) => {
    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-9">
          <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
            <div className="flex space-x-2 items-center job-items w-full">
              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                <img src={localImgLoad(`images/taskbanners/${value.banner ? value.banner : 'default.jpg'}`)} alt="data" className="w-full h-full rounded-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>{value.description}</div>
                <span className="text-sm text-thin-light-gray flex items-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>
              </div>
            </div>

            <div className="h-[33px] w-[150px] flex flex-nowrap items-center self-end">
              <button
                type="button"
                className="p-1 border-2 border-red-400 rounded-md"
                onClick={() => {
                  setDeleteJobPopout({
                    show: true,
                    data: { thePrice, ...value },
                  });
                }}
              >
                <img className="w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
              </button>
              <div className="mx-[4px] h-full w-[1px] bg-black dark:bg-dark-gray"></div>
              <button
                type="button"
                className="p-1 border-2 border-sky-blue rounded-md flex items-center"
                onClick={() => {
                  setEditJob({
                    show: true,
                    data: { thePrice, ...value },
                  });
                }}
              >
                <img className="w-[21px] h-[21px]" src={EditIcon} alt='edit-icon' />
                <span className="text-sm text-sky-blue">Edit</span>
              </button>
            </div>
          </div>
        </td>

        <td className="text-right py-9 px-2">
          <button
            type="button"
            onClick={() => {
              setJobPopout({ show: true, data: { thePrice, ...value } });
            }}
            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
            Assign
          </button>
        </td>
      </tr>
    );
  };

  return (
    <div
      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
        className || ""
      }`}
    >
      <div className="header w-full flex justify-between items-center mb-5">
        <div className="flex space-x-2 items-center">
          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
            {filterCategories[selectedCategory]} Jobs
          </h1>
        </div>  
        <SelectBox
          action={handleSetCategory}
          datas={Object.values(filterCategories)}
          className="Update-table-dropdown"
          contentBodyClasses="w-auto min-w-max"
        />
      </div>
      {MyJobList.loading ? (
        <LoadingSpinner size="16" color="sky-blue" />
      ) : (
        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
          <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <tbody>
              <>
                {MyJobList &&
                MyJobList?.data?.result_list &&
                MyJobList.data?.result_list.length > 0 ? (
                  filteredCurrentJobList?.length ? (
                    filteredCurrentJobList.map((value, index) => (
                      <JobListItem index={index} key={index} value={value} />
                    ))
                  ) : (
                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                      <td className="p-2">
                        No Jobs Available In This Category!
                      </td>
                    </tr>
                  )
                ) : (
                  <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                    <td className="p-2">No Jobs Avaliable!</td>
                  </tr>
                )}
              </>
            </tbody>
          </table>

          {/* PAGINATION BUTTON */}
          <PaginatedList
            onClick={handlePagination}
            prev={currentPage == 0 ? true : false}
            next={
              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
              currentJobList?.length
                ? true
                : false
            }
            data={currentJobList}
            start={indexOfFirstItem}
            stop={indexOfLastItem}
          />
          {/* END OF PAGINATION BUTTON */}
        </div>
      )}

      {/* Job List Popout */}
      {jobPopout.show && (
        <JobListPopout
          details={jobPopout.data}
          onClose={() => {
            setJobPopout({ show: false, data: {} });
          }}
          situation={jobPopout.show}
        />
      )}
      {/* End of Job List Popout */}

      {/* Delete Job Popout */}
      {deleteJobPopout.show && (
        <DeleteJobPopout
          details={deleteJobPopout.data}
          onClose={() => {
            setDeleteJobPopout({ show: false, data: {} });
          }}
          reloadJobList={reloadJobList}
          situation={deleteJobPopout.show}
        />
      )}
      {/* END of Delete Job Popout */}

      {editJob.show && (
        <EditJobPopOut
          details={editJob.data}
          onClose={() => {
            setEditJob({
              show: false,
              data: {},
            });
          }}
          situation={editJob.show}
          country={myCountry}
          categories={currentJobCart}
        />
      )}
    </div>
  );
}