import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { useDirection, useI18n } from '../../hooks';
import Icon, { registerIcon } from '../Icon';
import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
import * as caretRightIcon from '../Icon/icons/caret-right.icon';
import Button from '../Button';
import Flex from '../Flex';
registerIcon(caretLeftIcon, caretRightIcon);
const defaultProps = {
    pageNumber: 1,
    pageSize: 10
};
const Pagination = (props) => {
    const { total, onPageChange, ...restProps } = props;
    let { pageSize = 10, pageNumber = 1 } = props;
    const t = useI18n();
    pageSize = Math.max(1, pageSize);
    const pageCount = Math.ceil(total / pageSize);
    if (pageNumber < 1)
        pageNumber = 1;
    if (pageNumber > pageCount)
        pageNumber = pageCount;
    const handlePageChange = useCallback((currentValue) => {
        if (onPageChange)
            onPageChange(currentValue);
    }, [onPageChange]);
    const { start, end } = useDirection();
    return (_jsxs(Flex, { container: {
            gap: 1
        }, "aria-label": t('pagination_page_of', [pageNumber, pageCount]), role: 'tablist', total: total, ...restProps, children: [_jsx(Flex, { container: { alignItems: 'center' }, "aria-hidden": true, children: t('pagination_page_of', [pageNumber, pageCount]) }), _jsxs(Flex, { container: {
                    gap: 1
                }, children: [_jsx(Button, { variant: 'simple', label: t('pagination_prev'), disabled: pageNumber === 1, onClick: () => handlePageChange(pageNumber - 1), icon: true, children: _jsx(Icon, { name: `caret-${start}` }) }), _jsx(Button, { variant: 'simple', label: t('pagination_next'), disabled: pageNumber === pageCount, onClick: () => handlePageChange(pageNumber + 1), icon: true, children: _jsx(Icon, { name: `caret-${end}` }) })] })] }));
};
Pagination.defaultProps = defaultProps;
export default Pagination;
//# sourceMappingURL=Pagination.js.map