
import { useState, useEffect, useMemo } from "react"


function TablePaginate({ total = 0, itemsPerPage=10, currentPage = 1, onPageChange}){

    const [totalPages, setTotalPages] = useState(0);
    

    //Setting the Total Pages
    useEffect(() => {
        if(total > 0 & itemsPerPage > 0){
            setTotalPages(Math.ceil(total / itemsPerPage))
        }

    }, [total, itemsPerPage]);

    

    const paginateItems = useMemo(() => {
        const pages = [];

        for(let i = 1; i <= totalPages; i++){
            {pages.push(
                <li  className="cursor-pointer">
                    <a onClick={() => onPageChange(i)} className={`${i === currentPage ? "bg-primary text-black" : " "} py-2 px-3 leading-tight font-semibold bg-black border-2 border-white hover:bg-black hover:text-white`}>{i}</a>
                </li>
            )}
            
        }

        return pages;

    }, [totalPages, currentPage, onPageChange]);


    if(totalPages === 0) return null;
   

    return (
         <ul className="inline-flex items-center -space-x-px lg:m-0 my-3">
            <li className={`${currentPage === 1 ? "cursor-not-allowed" : "cursor-pointer "} `} disabled={currentPage === 1} >
                <a disabled={currentPage === 1} onClick={() => onPageChange(currentPage - 1)}  className="block py-2 px-3 ml-0 leading-tight rounded-l-lg border border-gray-300 hover:bg-primary hover:text-black">
                    <span className="sr-only">Previous</span>
                    <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd"></path></svg>
                </a>
            </li>


            { paginateItems }
            

            <li className={`${currentPage === totalPages ? "cursor-not-allowed" : "cursor-pointer "} `} disabled={currentPage === totalPages}>
                <a onClick={() => onPageChange(currentPage + 1)} className="block py-2 px-3 leading-tight text-white bg-black rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
                    <span className="sr-only">Next</span>
                    <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"></path></svg>
                </a>
            </li>
        </ul>
    )
}

export default TablePaginate