import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { SoftModal } from './SoftModal';
import { SoftModalFooter } from './SoftModalFooter';
import { SoftModalHeader } from './SoftModalHeader';
import { SoftModalHeaderTitle } from './SoftModalHeaderTitle';
import { SoftModalBody } from './SoftModalBody';
import { SoftButton } from '../Button';
import { SoftButtonEmpty } from '../ButtonEmpty';
import { SoftText, } from '../Text';
export const CONFIRM_BUTTON = 'confirm';
export const CANCEL_BUTTON = 'cancel';
const CONFIRM_MODAL_BUTTONS = [
    CONFIRM_BUTTON,
    CANCEL_BUTTON,
];
export class SoftConfirmModal extends Component {
    constructor() {
        super(...arguments);
        this.confirmRef = node => this.confirmButton = node;
        this.cancelRef = node => this.cancelButton = node;
    }
    componentDidMount() {
        // We have to do this instead of using `autoFocus` because React's polyfill for auto-focusing
        // elements conflicts with the focus-trap logic we have on SoftModal.
        const { defaultFocusedButton } = this.props;
        // Wait a beat for the focus-trap to complete, and then set focus to the right button. Check that
        // the buttons exist first, because it's possible the modal has been closed already.
        requestAnimationFrame(() => {
            if (defaultFocusedButton === CANCEL_BUTTON && this.cancelButton) {
                this.cancelButton.focus();
            }
            else if (defaultFocusedButton === CONFIRM_BUTTON && this.confirmButton) {
                this.confirmButton.focus();
            }
        });
    }
    render() {
        const { children, title, onCancel, onConfirm, cancelButtonText, confirmButtonText, confirmButtonDisabled, className, buttonColor, defaultFocusedButton, // eslint-disable-line no-unused-vars
        ...rest } = this.props;
        const classes = classnames('softModal--confirmation', className);
        let modalTitle;
        if (title) {
            modalTitle = (React.createElement(SoftModalHeader, null,
                React.createElement(SoftModalHeaderTitle, { "data-test-subj": "confirmModalTitleText" }, title)));
        }
        let message;
        if (typeof children === 'string' && children.length > 0) {
            message = React.createElement("p", null, children);
        }
        else {
            message = children;
        }
        return (React.createElement(SoftModal, Object.assign({ className: classes, onClose: onCancel }, rest),
            modalTitle,
            message && (React.createElement(SoftModalBody, null,
                React.createElement(SoftText, { "data-test-subj": "confirmModalBodyText" }, message))),
            React.createElement(SoftModalFooter, null,
                React.createElement(SoftButtonEmpty, { "data-test-subj": "confirmModalCancelButton", onClick: onCancel, buttonRef: this.cancelRef }, cancelButtonText),
                React.createElement(SoftButton, { "data-test-subj": "confirmModalConfirmButton", onClick: onConfirm, fill: true, buttonRef: this.confirmRef, color: buttonColor, isDisabled: confirmButtonDisabled }, confirmButtonText))));
    }
}
SoftConfirmModal.propTypes = {
    children: PropTypes.node,
    title: PropTypes.node,
    cancelButtonText: PropTypes.node,
    confirmButtonText: PropTypes.node,
    onCancel: PropTypes.func,
    onConfirm: PropTypes.func,
    confirmButtonDisabled: PropTypes.bool,
    className: PropTypes.string,
    defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS),
    buttonColor: PropTypes.string,
    // For docs only, will get passed with ...rest
    /**
     * 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,
    ]),
};
SoftConfirmModal.defaultProps = {
    buttonColor: 'primary',
};
//# sourceMappingURL=SoftConfirmModal.js.map