import './Confirm.scss'
import React from 'react';
import ReactDOM from "react-dom";
import cn from 'classnames';
import ReactTransitionGroup from "react-addons-css-transition-group";

import IconWarning from './icons/exclamation-circle.svg?jsx';

export default class Confirm extends React.Component {
    state = {
        commentValue: ''
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.visible !== prevProps.visible) {
            if (this.state.commentValue) this.setState({commentValue: ''})
        }
    }

    render() {
        let {commentValue} = this.state;
        let {message, title, onRequestClose, onConfirm, visible, mode = 'warning', comment, intl} = this.props;

        return ReactDOM.createPortal(<ReactTransitionGroup
            transitionName="confirmTransition"
            transitionEnterTimeout={150}
            transitionLeaveTimeout={150}
        >
            {visible && <div
                className={cn({
                    'confirm': true,
                    ['confirm_' + mode]: mode,
                })}
                onClick={e => {
                    if (onRequestClose) onRequestClose()
                }}
            >
                <div
                    className="confirm__modal"
                    onClick={e => e.stopPropagation()}
                >
                    <div className="confirm__modalHeader">
                        <IconWarning/>
                        {title}
                    </div>
                    <div className="confirm__modalMain">
                        {message && <p>
                            {message}
                        </p>}
                        {comment && <textarea
                            rows={3}
                            autoFocus={true}
                            value={commentValue}
                            onChange={e => {
                                this.setState({commentValue: e.target.value})
                            }}
                            placeholder="Comment"
                        >

                    </textarea>}
                        <div className="confirm__modalFooter">
                            <button
                                onClick={e => {
                                    if (onRequestClose) onRequestClose()
                                }}
                            >
                                Cancel
                            </button>
                            <button
                                disabled={comment ? !commentValue : false}
                                onClick={() => {
                                    if (onConfirm) onConfirm(commentValue)
                                }}
                            >
                                Confirm
                            </button>
                        </div>
                    </div>
                </div>
            </div>}
        </ReactTransitionGroup>, document.body)
    }
}