import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from "classnames";
import { t } from "ttag";
import styled from "styled-components";
import { useCallback, useMemo } from "react";
import Button from "../button";
import { usePagination } from "./use-pagination";
import { Arrow } from "./arrow";
import { capitalize } from "@equilab/utils/lib/format/index";
const ArrowLeft = styled(Arrow) `
  height: 16px;
  width: 16px;
  padding-right: 7px;
`;
const ArrowRight = styled(ArrowLeft) `
  transform: rotate(180deg);
`;
const ButtonGo = styled(Button) `
  background-color: unset;
  min-width: unset;
  width: fit-content;

  color: ${({ theme }) => theme.colors.text};

  :disabled {
    background-color: unset;
    path {
      fill: ${({ theme }) => theme?.button?.disabledOutlinedColor};
    }
  }

  :hover {
    text-decoration: unset;
  }

  :hover:not(:disabled) {
    color: ${({ theme }) => theme.colors.primary};

    path {
      transition: 0.2s;
      fill: ${({ theme }) => theme.colors.primary};
    }
  }
`;
const ButtonPage = styled(Button) `
  height: 20px;
  min-width: 20px;
  width: fit-content;
  border-radius: 10px;
  background-color: unset;
  border: 0;
  transition: unset;

  color: #000;
  font-size: 12px;
  font-family: Medium;

  :hover:not(:disabled) {
    background-color: #b84218;
  }
`;
const ButtonTabsWrapper = styled.div `
  display: flex;
  padding: 0 20px;

  > *:not(:last-child) {
    margin-right: 8px;
  }

  .active {
    color: #fff;
    background-color: #b84218;
  }

  .active:disabled {
    background-color: #b8421880;
  }
`;
const Dots = styled.div `
  display: flex;
  justify-content: center;

  height: 20px;
  width: ${({ compact }) => (compact ? 6 : 20)}px;

  font-family: Medium;

  white-space: nowrap;
`;
const Wrapper = styled.div `
  display: flex;
  flex-flow: row;
  height: 32px;
  padding: 12px 0;
  align-items: center;

  .container {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    width: 380px;
  }
`;
const PAGES_FOR_DISPLAY = 6;
var Buttons;
(function (Buttons) {
    Buttons["prev"] = "prev";
    Buttons["next"] = "next";
})(Buttons || (Buttons = {}));
export const Pagination = ({ className, page, pageCount, setPage, disabled, }) => {
    const { goToPage, isLastPage, isFirstPage, noPages } = usePagination({
        page,
        setPage,
        pageCount,
    });
    const handlePaging = useCallback((event) => {
        const target = event.currentTarget;
        if (!target)
            return;
        // @ts-ignore
        const dataset = target.dataset;
        if (!dataset)
            return;
        const paging = dataset.paging;
        if (!paging)
            return;
        switch (paging) {
            case Buttons.prev: {
                goToPage(page - 1);
                break;
            }
            case Buttons.next: {
                goToPage(page + 1);
                break;
            }
        }
    }, [goToPage, page]);
    const pageInEnd = useCallback((page, pageCount) => {
        return page > pageCount - (PAGES_FOR_DISPLAY - 2);
    }, []);
    const pageInStart = useCallback((page) => {
        return page - 1 < PAGES_FOR_DISPLAY - 2;
    }, []);
    const getPagesTabs = useCallback((page, pageCount) => {
        const isPageInStart = pageInStart(page);
        const isPageInEnd = pageInEnd(page, pageCount);
        const isPageInMiddle = !isPageInStart && !isPageInEnd;
        const pageTabs = Array(pageCount)
            .fill(null)
            .map((_, i) => i + 1);
        let partOfPages = [];
        if (pageCount <= PAGES_FOR_DISPLAY) {
            return pageTabs;
        }
        if (isPageInMiddle) {
            partOfPages = [null, ...pageTabs.slice(page - 2, page + 1), null];
        }
        if (isPageInStart) {
            partOfPages = [...pageTabs.slice(1, PAGES_FOR_DISPLAY - 2), null];
        }
        if (isPageInEnd) {
            partOfPages = [
                null,
                ...pageTabs.slice(pageCount - (PAGES_FOR_DISPLAY - 2), pageCount - 1),
            ];
        }
        return [pageTabs[0], ...partOfPages, pageTabs[pageTabs.length - 1]];
    }, [pageInEnd, pageInStart]);
    const isPageInMiddle = useMemo(() => {
        return !pageInStart(page) && !pageInEnd(page, pageCount);
    }, [page, pageCount, pageInEnd, pageInStart]);
    return (_jsx(Wrapper, { className: cn("ui-pagination__wrapper", className), children: _jsxs("div", { className: "ui-pagination__container container", children: [_jsxs(ButtonGo, { texted: true, outlined: true, size: "xs", disabled: disabled || isFirstPage || noPages, onClick: handlePaging, "data-paging": Buttons.prev, className: "ui-pagination__button-prev", children: [_jsx(ArrowLeft, {}), capitalize(t `${Buttons.prev}`)] }), _jsx(ButtonTabsWrapper, { children: getPagesTabs(page, pageCount).map((pageTab, i) => {
                        if (pageTab === null)
                            return (_jsx(Dots, { className: "ui-pagination__dots", compact: isPageInMiddle, children: "..." }, `dots-${i}`));
                        return (_jsx(ButtonPage, { className: `ui-pagination__page-tab${page === pageTab ? " active" : ""}`, onClick: () => setPage(pageTab), outlined: true, disabled: disabled, children: pageTab }, `page-${i}`));
                    }) }), _jsxs(ButtonGo, { texted: true, outlined: true, size: "xs", disabled: disabled || isLastPage || noPages, onClick: handlePaging, "data-paging": Buttons.next, className: "ui-pagination__button-next", children: [capitalize(t `${Buttons.next}`), _jsx(ArrowRight, {})] })] }) }));
};
//# sourceMappingURL=index.js.map