import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import { useNavigate, useLocation, Link } from "react-router-dom";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
import { useDispatch } from "react-redux";
import { tableReload } from "../../store/TableReloads";

import { PriceFormatter } from "../Helpers/PriceFormatter";

import familyImage from '../../assets/images/no-family-side.png'

export default function OthersInterestTable({othersInterestedList, className}) {

    const dispatch = useDispatch()
    const navigate = useNavigate();
    let { pathname } = useLocation();
    
    const filterCategories = ["All Categories", "Explore", "Featured"];
    const [selectedCategory, setCategory] = useState(filterCategories[0]);

    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem =
        Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const currentOthersInterestedList = othersInterestedList?.data?.slice(indexOfFirstItem, indexOfLastItem);

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

    return (
        <div
            className={`update-table w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
                className || ""
            }`}
        >
            
            {othersInterestedList?.loading ? (
                    <div className="min-h-[520px] w-full flex flex-col justify-center items-center">
                        <LoadingSpinner size="16" color="sky-blue" />
                    </div>
                )
                :
                othersInterestedList?.data?.length > 0 ?
                    (
                        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
                            <thead className="sticky top-0">
                            {/* <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
                                <th className="py-4">Name</th>
                                <th className="py-4 text-center">Last Login</th>
                                <th className="py-4 text-center">No of Tasks</th>
                                <th className="py-4 text-right"></th>
                            </tr> */}
                            </thead>
                            <tbody className="h-full">
                            {currentOthersInterestedList?.map((item, index) => {
                                const image = localStorage.getItem("session_token")
                                ? `${othersInterestedList.imageServer}${localStorage.getItem("session_token")}/job/${
                                    item.job_uid
                                  }`
                                : "";
                                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">
                                            <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                                <img
                                                    src={image}
                                                    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">
                                                    {item?.title}
                                                </h1>
                                                <span className="text-sm text-thin-light-gray">{item?.expire}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td className="text-center py-4 px-2">
                                        <div className="flex space-x-1 items-center justify-center">
                                            <p className="font-bold text-x text-dark-gray dark:text-white">{item?.client_name}</p>
                                        </div>
                                    </td>
                                    <td className="text-center py-4 px-2">
                                        <div className="flex space-x-1 items-center justify-center">
                                            {/* <span className="font-bold text-x text-dark-gray dark:text-white">{formatNumber(item?.price * 0.01)}</span> */}
                                            <span className="font-bold text-x text-dark-gray dark:text-white">{PriceFormatter(item?.price * 0.01,item?.currency_code,item?.currency)}</span>
                                        </div>
                                    </td>
            
                                    <td className="text-right py-4">
                                        <button
                                            onClick={() => {
                                                dispatch(tableReload({type:'OTHERSINTERESTEDTABLE'}))
                                                navigate("/manage-offer", {
                                                    state: { ...item, pathname },
                                                });
                                            }}
                                            type="button"
                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                        >
                                            View
                                        </button>
                                    </td>
                                </tr>
                                );
                            })
                            }
                            </tbody>
                        </table>
                    )
                    :
                    (
                        <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
                            <div className="p-2 w-full md:w-1/2">
                                <p className="mb-4 p-3 md:p-16">No Offer list avaliable.</p>
                                <button
                                    onClick={()=>{navigate('/market', {replace: true})}}
                                    type="button"
                                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
                                >
                                    Goto Market
                                </button>
                            </div>
                            <div className="p-2 w-full md:w-1/2">
                                <img className='w-full' src={familyImage && familyImage} alt="Add Family" />
                            </div>
                        </div>
                    )
            }
        
            {/* PAGINATION BUTTON */}
            <PaginatedList
                onClick={handlePagination}
                prev={currentPage == 0 ? true : false}
                next={
                    currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
                    othersInterestedList?.data?.length
                        ? true
                        : false
                }
                data={othersInterestedList?.data}
                start={indexOfFirstItem}
                stop={indexOfLastItem}
            />
            {/* END OF PAGINATION BUTTON */}
        </div>
    );
}