import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
import dataImage2 from "../../assets/images/data-table-user-2.png";
import dataImage3 from "../../assets/images/data-table-user-3.png";
import dataImage4 from "../../assets/images/data-table-user-4.png";
import SelectBox from "../Helpers/SelectBox";
import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";

import PaginatedList from "../Pagination/PaginatedList";
import { handlePagingFunc } from "../Pagination/HandlePagination";

export default function MyActiveJobTable({MyJobList, className }) {
    const filterCategories = ["All Categories", "Explore", "Featured"];
    const [selectedCategory, setCategory] = useState(filterCategories[0]);

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

    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
  
    const handlePagination = (e) => {
        handlePagingFunc(e,setCurrentPage)
    }

    return (
        <div
            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                className || ""
            }`}
        >
            {MyJobList && MyJobList?.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>
                    {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
                    {/*    <td className="py-4">All Product</td>*/}
                    {/*    <td className="py-4 text-right">.</td>*/}
                    {/*</tr>*/}

                    {
                        <>
                            {MyJobList && MyJobList?.result_list &&
                                MyJobList.result_list.length > 0 &&
                                currentActiveJobList.map((value, index) => (
                                    <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">
                                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                                        <img
                                                            src={dataImage2}
                                                            alt="data"
                                                            className="w-full h-full"
                                                        />
                                                    </div>
                                                    <div className="flex flex-col">
                                                        <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">
                                                        Price: <span className="text-purple">{value.price*0.01}</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">
                                                        Expire:   <span className="text-purple"> {value.expire}</span>
                                                        </span>
                                                        <span className="text-sm text-thin-light-gray">
                                                        Send to:   <span className="text-purple"> {value.job_to}</span>
                                                        </span>

                                                    </div>
                                                </div>
                                            </td>


                                            <td className="text-right py-4 px-2">
                                                <button
                                                    type="button"
                                                    onClick={()=>{setJobPopout({show:true, data:value})}}
                                                    className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                                >
                                                    View
                                                </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) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
                {/* END OF PAGINATION BUTTON */}
            </div>
            }

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