import React, { Component, } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { keyCodes } from '../../services';
import { SoftButtonIcon } from '../ButtonIcon';
import { SoftFocusTrap } from '../FocusTrap';
import { SoftI18n } from '../I18n';
export class SoftModal extends Component {
    constructor() {
        super(...arguments);
        this.onKeyDown = event => {
            if (event.keyCode === keyCodes.ESCAPE) {
                event.preventDefault();
                event.stopPropagation();
                this.props.onClose();
            }
        };
    }
    render() {
        const { className, children, initialFocus, onClose, // eslint-disable-line no-unused-vars
        maxWidth, style, ...rest } = this.props;
        let newStyle;
        let widthClassName;
        if (maxWidth === true) {
            widthClassName = 'softModal--maxWidth-default';
        }
        else if (maxWidth !== false) {
            const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
            newStyle = { ...style, maxWidth: value };
        }
        const classes = classnames('softModal', widthClassName, className);
        return (React.createElement(SoftFocusTrap, { initialFocus: initialFocus },
            React.createElement("div", Object.assign({ ref: node => {
                    this.modal = node;
                }, className: classes, onKeyDown: this.onKeyDown, tabIndex: 0, style: newStyle || style }, rest),
                React.createElement(SoftI18n, { token: "softModal.closeModal", default: "Closes this modal window" }, closeModal => (React.createElement(SoftButtonIcon, { iconType: "cross", onClick: onClose, className: "softModal__closeIcon", color: "text", "aria-label": closeModal }))),
                React.createElement("div", { className: "softModal__flex" }, children))));
    }
}
SoftModal.propTypes = {
    className: PropTypes.string,
    children: PropTypes.node,
    onClose: PropTypes.func.isRequired,
    /**
     * Sets the max-width of the modal.
     * Set to `true` to use the default (`softBreakpoints 'm'`),
     * set to `false` to not restrict the width,
     * set to a number for a custom width in px,
     * set to a string for a custom width in custom measurement.
     */
    maxWidth: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number,
        PropTypes.string,
    ]),
    /** specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. */
    initialFocus: PropTypes.oneOfType([
        PropTypes.instanceOf(HTMLElement),
        PropTypes.func,
        PropTypes.string,
    ]),
};
SoftModal.defaultProps = {
    maxWidth: true,
};
//# sourceMappingURL=SoftModal.js.map