import React from "react";
import "./pagination.scss";

type PaginationProps = {
    currentPage: number;
    totalPages: number;
    setPage: (p: number) => void;
    isLoading?: Boolean
    theme?: string
};


const PAGINATION_RANGE = 2;
const Pagination = ({currentPage, totalPages, setPage, isLoading = false, theme = 'default'}: PaginationProps) => {
    let outOfRange = false;


    return (

        <>
            {totalPages > 1 &&
                <ul id={"pagination"} className={`${theme} ${isLoading ? 'loading' : ''}`}>
                    {
                        <li
                            className={currentPage == 1 ? "disabled" : ""}
                            onClick={() => {
                                if (isLoading) return
                                setPage(currentPage - 1)
                            }}
                        >
                            {"<"}
                        </li>
                    }

                    {Array(totalPages)
                        .fill(null)
                        .map((_, i) => {
                            const p = i + 1;


                            if (p <= 2 || (totalPages - p) < 2 || (Math.abs(currentPage - p) < 2)) {
                                outOfRange = false
                                return (
                                    <li key={p}
                                        className={p == currentPage ? "disabled current" : ""}
                                        onClick={() => {
                                            if (isLoading) return
                                            setPage(i + 1)
                                        }}
                                    >
                                        {p}
                                    </li>
                                )
                            } else {

                                if (!outOfRange) {
                                    outOfRange = true
                                    return <li key={p}>...</li>
                                }

                            }

                        })}
                    {
                        <li
                            className={currentPage == totalPages ? "disabled" : ""}
                            onClick={() => {
                                if (isLoading) return
                                setPage(currentPage + 1);
                            }}
                        >
                            {">"}
                        </li>
                    }
                </ul>
            }
        </>


    )
        ;
};

export default Pagination;