import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { MenuItem } from '../MenuItem';
import { Select } from '../Select';
import { Typography } from '../Typography';
import { classNames } from '../utils/classNames';
import { cva } from '../utils/cva';
import { DEFAULT_ROWS_PER_PAGE, DEFAULT_ROWS_PER_PAGE_OPTION, paginationClassnames, } from './constants';
import { PaginationWrapper, Range, RangeWrapper } from './styles';
import { useLogic } from './useLogic';
const rootCva = cva(paginationClassnames.root, {
    variants: {
        leadingContent: {
            true: paginationClassnames.leadingContent,
        },
    },
});
export const DataGridPaginationContainer = ({ pagination, className, formattedRange, rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTION, onSetCountPerPage, rowsPerPage = DEFAULT_ROWS_PER_PAGE, isDisabled, }) => {
    const { handleChangeRowsPerPage } = useLogic({ onSetCountPerPage });
    return (_jsxs(PaginationWrapper, { className: classNames(className, rootCva({
            leadingContent: Boolean(onSetCountPerPage || formattedRange),
        })), children: [(onSetCountPerPage || formattedRange) && (_jsxs(RangeWrapper, { children: [onSetCountPerPage && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: "\u0421\u0442\u0440\u043E\u043A \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435:" }), _jsx(Select, { size: "small", value: rowsPerPage, disabled: isDisabled, isShowClearButton: false, onChange: handleChangeRowsPerPage, children: rowsPerPageOptions.map((option) => (_jsx(MenuItem, { value: option, children: option }, option))) })] })), formattedRange && _jsx(Range, { variant: "body1", children: formattedRange() })] })), pagination && pagination] }));
};
