import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

const PaginationControl = (props) => {
    const {
        searchString,
        searchResultsObj,
        currentPage,
        spinnerState,
        getDocumentResults,
    } = props;
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);

    const getRange = (start, end) => {
        //console.log(start, end);
        return Array(end - start + 1)
            .fill()
            .map((v, i) => i + start);
    };

    const paginationNumbers = (currentPage, pageCount) => {
        //console.log(currentPage);
        let delta;
        if (pageCount <= 10) {
            // delta === 7: [1 2 3 4 5 6 7]
            delta = 10;
        } else {
            // delta === 2: [1 ... 4 5 6 ... 10]
            // delta === 4: [1 2 3 4 5 ... 10]
            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6;
        }

        const range = {
            start: Math.round(currentPage - delta / 2),
            end: Math.round(currentPage + delta / 2),
        };

        if (range.start - 1 === 1 || range.end + 1 === pageCount) {
            range.start += 1;
            range.end += 1;
        }

        let pages =
            currentPage > delta
                ? getRange(
                      Math.min(range.start, pageCount - delta),
                      Math.min(range.end, pageCount)
                  )
                : getRange(1, Math.min(pageCount, delta + 1));

        const withDots = (value, pair) =>
            pages.length + 1 !== pageCount ? pair : [value];

        if (pages[0] !== 1) {
            pages = withDots(1, [1, "..."]).concat(pages);
        }

        if (pages[pages.length - 1] < pageCount) {
            pages = pages.concat(withDots(pageCount, ["...", pageCount]));
        }

        //console.log(pages);
        return pages;
    };

    const paginationArray = paginationNumbers(currentPage, pagesCount);

    return (
        <>
            {pagesCount > 1 ? (
                <div className="govuk-!-margin-bottom-7 ">
                    <div className="govuk-grid-row paginationWrapper">
                        <div className="govuk-grid-column-one-quarter paginationPrevious">
                            {currentPage != 1 ? (
                                <span
                                    className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                    onClick={() => {
                                        spinnerState(),
                                            getDocumentResults(currentPage - 1);
                                    }}
                                >
                                    {t("common:previous-link-button")}
                                </span>
                            ) : (
                                <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
                                    {t("common:previous-link-button")}
                                </span>
                            )}
                        </div>
                        <div className="govuk-grid-column-one-half paginationContainer">
                            {paginationArray.map((e, i) =>
                                currentPage == i + 1 ? (
                                    <span
                                        key={i}
                                        className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
                                    >
                                        {e}
                                    </span>
                                ) : e == "..." ? (
                                    <span
                                        key={i}
                                        className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                    >
                                        {e}
                                    </span>
                                ) : (
                                    <span
                                        className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                        key={i}
                                        onClick={() => {
                                            spinnerState();
                                            console.log(i + 1);
                                            getDocumentResults(i + 1);
                                        }}
                                    >
                                        {e}
                                    </span>
                                )
                            )}
                        </div>
                        <div className="govuk-grid-column-one-quarter paginationNext">
                            {currentPage != pagesCount ? (
                                <span
                                    className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                    onClick={() => {
                                        spinnerState(),
                                            getDocumentResults(currentPage + 1);
                                    }}
                                >
                                    {t("common:next-link-button")}
                                </span>
                            ) : (
                                <span className="govuk-body rightTextButton govuk-!-font-weight-bold">
                                    {" "}
                                    {t("common:next-link-button")}
                                </span>
                            )}
                        </div>
                    </div>
                    <div className="govuk-body-s mobilePageCount">
                        {t("common:pages-label")} {currentPage}{" "}
                        {t("common:of-label")} {pagesCount}
                    </div>
                </div>
            ) : (
                ""
            )}
        </>
    );
};

export default PaginationControl;