import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftButtonEmpty } from '../../ButtonEmpty';
import { SoftPopover } from '../../Popover';
import { SoftContextMenuPanel } from '../../ContextMenu';
import { SoftI18n } from '../../I18n';
import { SoftTableSortMobileItem } from './SoftTableSortMobileItem';
export class SoftTableSortMobile 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 { className, anchorPosition, items, ...rest } = this.props;
        const classes = classNames('softTableSortMobile', className);
        const mobileSortButton = (React.createElement(SoftButtonEmpty, { iconType: "arrowDown", iconSide: "right", onClick: this.onButtonClick.bind(this), flush: "right", size: "xs" },
            React.createElement(SoftI18n, { token: "softTableSortMobile.sorting", default: "Sorting" })));
        const mobileSortPopover = (React.createElement(SoftPopover, Object.assign({ id: "sortPopover", ownFocus: true, button: mobileSortButton, isOpen: this.state.isPopoverOpen, closePopover: this.closePopover, anchorPosition: anchorPosition || 'downRight', panelPaddingSize: "none" }, rest),
            React.createElement(SoftContextMenuPanel, { style: { minWidth: 200 }, items: items && items.length ? items.map(item => {
                    return (React.createElement(SoftTableSortMobileItem, { key: item.key, onSort: item.onSort, isSorted: item.isSorted, isSortAscending: item.isSortAscending }, item.name));
                }) : null, watchedItemProps: ['isSorted', 'isSortAscending'] })));
        return (React.createElement("div", { className: classes }, mobileSortPopover));
    }
}
SoftTableSortMobile.propTypes = {
    className: PropTypes.string,
    anchorPosition: PropTypes.string,
    items: PropTypes.array,
};
//# sourceMappingURL=SoftTableSortMobile.js.map