import React from "react";
import "./pagination.scss";
import SelectItem from "../../Forms/CustomSelect/SelectItem";
import CustomSelect from "../../Forms/CustomSelect/CustomSelect";
import LastUpdatedTooltip from "../../../UI/LastUpdatedTooltip/LastUpdatedTooltip";

type PaginationProps = {
    currentPage: number;
    totalPages: number;
    setPage: (p: number) => void;
    isLoading?: Boolean
    theme?: 'default' | 'dua-list'
    setPerPage?: (p: number) => void
    perPage?: number
    totalRecords?:any
    lastFetched?: any
};


const Pagination = ({totalRecords,
                        lastFetched,
                        currentPage,
                        totalPages,
                        setPage,
                        isLoading = false,
                        setPerPage,
                        perPage,
                        theme = 'dua-list'
                    }: PaginationProps) => {

    let outOfRange = false;

    return (<>
        <div className="pagination-container d-flex flex-wrap">
            <div className={'d-flex flex-wrap align-items-center gap-3 mb-1'}>
            {
                setPerPage &&
                <>
                    <span className={'per-page-text'}>ΑΠΟΤΕΛΕΣΜΑΤΑ ΑΝΑ ΣΕΛΙΔΑ</span>
                    <CustomSelect
                        theme={'per-page'}
                        value={Number(perPage) as number}
                        handleChange={(page) => {
                            setPerPage(Number(page))

                        }}>
                        <SelectItem value={5}>
                            5
                        </SelectItem>
                        <SelectItem value={10}>
                            10
                        </SelectItem>
                        <SelectItem value={15}>
                            15
                        </SelectItem>
                        <SelectItem value={20}>
                            20
                        </SelectItem>
                        <SelectItem value={50}>
                            50
                        </SelectItem>
                        <SelectItem value={100}>
                            100
                        </SelectItem>
                    </CustomSelect>
                </>

            }

            {totalPages > 1 &&
                <ul id={"pagination"} className={`${theme} ${isLoading ? 'loading' : ''}`}>
                    {
                        <li
                            // eslint-disable-next-line eqeqeq
                            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}
                                        // eslint-disable-next-line eqeqeq
                                        className={p == currentPage ? "disabled current" : ""}
                                        onClick={() => {
                                            if (isLoading) return
                                            setPage(i + 1)
                                        }}
                                    >
                                        {p}
                                    </li>
                                )
                            } else {

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

                            }

                        })}
                    {
                        <li
                            // eslint-disable-next-line eqeqeq
                            className={currentPage == totalPages ? "disabled" : ""}
                            onClick={() => {
                                if (isLoading) return
                                setPage(currentPage + 1);
                            }}
                        >
                            {">"}
                        </li>
                    }
                </ul>
            }
            {totalRecords &&
                <>
                    <span className={'total-records-pagination'}>ΣΥΝΟΛΙΚΑ ΑΠΟΤΕΛΕΣΜΑΤΑ: {totalRecords}</span></>
            }

            </div>
            <div className={'ms-lg-auto last-updated-container'}>
                {
                    lastFetched && lastFetched != '' &&
                    <LastUpdatedTooltip datetime={lastFetched}></LastUpdatedTooltip>
                }
            </div>
        </div>

        </>


    );
};

export default Pagination;