import React, { Component, } from 'react';
import PropTypes from 'prop-types';
import { SoftButtonEmpty } from '../../ButtonEmpty';
import { SoftContextMenuItem, SoftContextMenuPanel } from '../../ContextMenu';
import { SoftFlexGroup, SoftFlexItem } from '../../Flex';
import { SoftPagination } from '../../Pagination';
import { SoftPopover } from '../../Popover';
import { SoftI18n } from '../../I18n';
export class SoftTablePagination extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isPopoverOpen: false,
        };
        this.onButtonClick = () => {
            this.setState({
                isPopoverOpen: !this.state.isPopoverOpen,
            });
        };
        this.closePopover = () => {
            this.setState({
                isPopoverOpen: false,
            });
        };
    }
    render() {
        const { activePage, itemsPerPage, itemsPerPageOptions, hidePerPageOptions, onChangeItemsPerPage, onChangePage, pageCount, } = this.props;
        const button = (React.createElement(SoftButtonEmpty, { size: "xs", color: "text", iconType: "arrowDown", iconSide: "right", onClick: this.onButtonClick },
            React.createElement(SoftI18n, { token: "softTablePagination.rowsPerPage", default: "Rows per page" }),
            ": ",
            itemsPerPage));
        const items = itemsPerPageOptions.map(itemsPerPageOption => (React.createElement(SoftContextMenuItem, { key: itemsPerPageOption, icon: itemsPerPageOption === itemsPerPage ? 'check' : 'empty', onClick: () => {
                this.closePopover();
                onChangeItemsPerPage(itemsPerPageOption);
            } },
            React.createElement(SoftI18n, { token: "softTablePagination.rowsPerPageOption", values: { rowsPerPage: itemsPerPageOption }, default: "{rowsPerPage} rows" }))));
        const itemsPerPagePopover = (React.createElement(SoftPopover, { id: "customizablePagination", button: button, isOpen: this.state.isPopoverOpen, closePopover: this.closePopover, panelPaddingSize: "none", withTitle: true, anchorPosition: "upRight" },
            React.createElement(SoftContextMenuPanel, { items: items })));
        return (React.createElement(SoftFlexGroup, { justifyContent: "spaceBetween", alignItems: "center", responsive: false },
            React.createElement(SoftFlexItem, { grow: false }, hidePerPageOptions ? null : itemsPerPagePopover),
            React.createElement(SoftFlexItem, { grow: false },
                React.createElement(SoftPagination, { pageCount: pageCount, activePage: activePage, onPageClick: onChangePage }))));
    }
}
SoftTablePagination.propTypes = {
    activePage: PropTypes.number,
    itemsPerPage: PropTypes.number,
    itemsPerPageOptions: PropTypes.arrayOf(PropTypes.number),
    hidePerPageOptions: PropTypes.bool,
    onChangeItemsPerPage: PropTypes.func,
    onChangePage: PropTypes.func,
    pageCount: PropTypes.number,
};
SoftTablePagination.defaultProps = {
    itemsPerPage: 50,
    itemsPerPageOptions: [10, 20, 50, 100],
    hidePerPageOptions: false
};
//# sourceMappingURL=SoftTablePagination.js.map