import React, { useEffect, useState } from 'react';
import { Link } from "react-router-dom";

const Pagination = ({ activities, currentPage, getLogs, setCurrentPage }) => {
    const [totalPages, setTotalPages] = useState(0)
    const [pages, setPages] = useState([]);

    const calTotalPage = (ordersLength, pageLength) => {
        return Math.ceil(ordersLength / pageLength);
    }

    const generatePages = (totalPages) => {
        const maxPagesToShow = 5;
        const pageNumbers = [];
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxPagesToShow) {
            const halfPagesToShow = Math.floor(maxPagesToShow / 2);
            startPage = Math.max(currentPage - halfPagesToShow, 1);
            endPage = Math.min(startPage + maxPagesToShow - 1, totalPages);

            if (endPage === totalPages) {
                startPage = Math.max(totalPages - maxPagesToShow + 1, 1);
            }
        }

        if (startPage > 1) {
            pageNumbers.push(1);
            if (startPage > 2) {
                pageNumbers.push('...');
            }
        }

        for (let i = startPage; i <= endPage; i++) {
            pageNumbers.push(i);
        }

        if (endPage < totalPages) {
            if (endPage < totalPages - 1) {
                pageNumbers.push('...');
            }
            pageNumbers.push(totalPages);
        }

        setPages(pageNumbers);
    };

    const handlePagination = (pageNumber) => {
        setCurrentPage(pageNumber)
    }

    useEffect(() => {
        if (activities.logs) {
            const calTotal = calTotalPage(activities.length, 20);
            setTotalPages(calTotal)
            generatePages(calTotal)
        }
    }, [activities, currentPage])

    return (
        <div className="arcm-w-full arcm-flex arcm-justify-end">
            <div className="arcm-flex arcm-items-center arcm-gap-4 arcm-mb-[15px] arcm-mt-[15px]">
                {currentPage > 1 && (
                    <button onClick={() => handlePagination((currentPage - 1))} className="arcm-flex arcm-items-center arcm-gap-1 arcm-px-0 arcm-py-3 arcm-font-sans arcm-text-xs arcm-font-bold arcm-text-center arcm-text-gray-900 arcm-uppercase arcm-align-middle arcm-transition-all arcm-rounded-full arcm-select-none hover:arcm-bg-gray-900/10 active:arcm-bg-gray-900/20 disabled:arcm-pointer-events-none disabled:arcm-opacity-50 disabled:arcm-shadow-none focus:arcm-outline-0 focus:arcm-shadow-none">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" aria-hidden="true" className="w-4 h-4">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
                        </svg>
                    </button>
                )}
                <div className="arcm-flex arcm-items-center arcm-gap-2">
                    {pages.map(pageNumber => (
                        <React.Fragment key={pageNumber}>
                            {pageNumber === '...' ? (
                                <span className="arcm-text-gray-900">{pageNumber}</span>
                            ) : (
                                <button onClick={() => handlePagination(pageNumber)} className={`arcm-relative arcm-h-10 arcm-max-h-[40px] arcm-w-10 arcm-max-w-[40px] arcm-select-none arcm-rounded-full arcm-text-center arcm-align-middle arcm-font-sans arcm-text-xs arcm-font-medium arcm-uppercase arcm-transition-all hover:arcm-bg-gray-900/10 active:arcm-bg-gray-900/20 disabled:arcm-pointer-events-none disabled:arcm-opacity-50 disabled:arcm-shadow-none ${pageNumber === currentPage ? 'arcm-bg-black arcm-text-white focus:arcm-text-white active:arcm-text-white arcm-shadow-md arcm-shadow-gray-900/10 hover:arcm-shadow-lg hover:arcm-shadow-gray-900/20 focus:arcm-opacity-[0.85] focus:arcm-shadow-none active:arcm-opacity-[0.85] active:arcm-shadow-none' : 'arcm-text-gray-900'}`}>
                                    <span className="arcm-absolute arcm-transform -arcm-translate-x-1/2 -arcm-translate-y-1/2 arcm-top-1/2 arcm-left-1/2">{pageNumber}</span>
                                </button>
                            )}
                        </React.Fragment>
                    ))}
                </div>
                {currentPage < totalPages && (
                    <button onClick={() => handlePagination((currentPage + 1))} className="arcm-flex arcm-items-center arcm-gap-1 px-0 py-3 arcm-font-sans arcm-text-xs arcm-font-bold arcm-text-center arcm-text-gray-900 arcm-uppercase arcm-align-middle arcm-transition-all arcm-rounded-full arcm-select-none hover:arcm-bg-gray-900/10 active:arcm-bg-gray-900/20 disabled:arcm-pointer-events-none disabled:arcm-opacity-50 disabled:arcm-shadow-none focus:arcm-outline-0 focus:arcm-shadow-none">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" aria-hidden="true" className="w-4 h-4">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
                        </svg>
                    </button>
                )}
            </div>
        </div>
    );
};

export default Pagination;