import MenuDownIcon from 'mdi-react/MenuDownIcon';
import * as React from 'react';
import Popover from 'reactstrap/lib/Popover';
import { Subscription } from 'rxjs';
import { Key } from 'ts-key-enum';
import { LinkOrSpan } from './LinkOrSpan';
/**
 * A button that toggles the visibility of a popover.
 */
export class PopoverButton extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = { open: false };
        this.subscriptions = new Subscription();
        this.rootRef = null;
        this.onClickLink = (e) => {
            this.setState({ open: false });
        };
        this.onGlobalKeyDown = (event) => {
            if (event.key === Key.Escape) {
                // Always close the popover when Escape is pressed, even when in an input.
                this.setState({ open: false });
                return;
            }
            // Otherwise don't interfere with user keyboard input.
            if (!this.props.globalKeyBindingActiveInInputs && isInputLike(event.target)) {
                return;
            }
            if (this.props.globalKeyBinding &&
                !event.ctrlKey &&
                !event.altKey &&
                !event.metaKey &&
                event.key === this.props.globalKeyBinding) {
                event.preventDefault();
                this.onPopoverVisibilityToggle();
            }
        };
        this.setRootRef = (e) => (this.rootRef = e);
        this.onPopoverVisibilityToggle = () => this.setState(prevState => ({ open: !prevState.open }));
    }
    componentDidMount() {
        window.addEventListener('keydown', this.onGlobalKeyDown);
    }
    componentWillReceiveProps(props) {
        if (props.hideOnChange !== this.props.hideOnChange) {
            this.setState({ open: false });
        }
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
        window.removeEventListener('keydown', this.onGlobalKeyDown);
    }
    render() {
        const isOpen = this.state.open || this.props.open;
        const popoverAnchor = this.rootRef && (React.createElement(Popover, { placement: this.props.placement || 'auto-start', isOpen: isOpen, toggle: this.onPopoverVisibilityToggle, target: this.rootRef, className: `popover-button__popover ${this.props.popoverClassName || ''}` }, this.props.popoverElement));
        return (React.createElement("div", { className: `popover-button ${isOpen ? 'popover-button--open' : ''} ${this.props.className || ''} ${this.props.link ? 'popover-button__container' : 'popover-button__btn popover-button__anchor'}`, ref: this.setRootRef },
            React.createElement(LinkOrSpan, { className: this.props.link ? 'popover-button__btn popover-button__btn--link' : 'popover-button__container', to: this.props.link, onClick: this.props.link ? this.onClickLink : this.onPopoverVisibilityToggle },
                this.props.children,
                ' ',
                !this.props.link && React.createElement(MenuDownIcon, { className: "icon-inline popover-button__icon" })),
            this.props.link ? (React.createElement("button", { className: "popover-button__anchor btn-icon", onClick: this.onPopoverVisibilityToggle },
                React.createElement(MenuDownIcon, { className: "icon-inline popover-button__icon popover-button__icon--outside" }),
                popoverAnchor)) : (popoverAnchor)));
    }
}
/** Reports whether elem is a field that accepts user keyboard input.  */
function isInputLike(elem) {
    return elem.tagName === 'INPUT' || elem.tagName === 'TEXTAREA' || elem.tagName === 'SELECT';
}
//# sourceMappingURL=PopoverButton.js.map