import React from 'react';
import { Alert } from 'react-bootstrap';
import { MessageDlg, Errors } from '../../../components';
import controlWrapper from './crud-control-wrapper';

class CrudMessage extends React.Component {

    constructor(props) {
        super(props);

        this.hideMessage = this.hideMessage.bind(this);
        this.confirmDlgClose = this.confirmDlgClose.bind(this);

        this.state = { msg: null };
    }

    eventHandler(evt, data) {
        if (evt === 'show-msg') {
            this.setState({ msg: data.msg, type: data.type });
            return;
        }

        if (evt === 'confirm-delete') {
            this.setState({ confirm: data });
            return;
        }
    }

    /**
     * Hide the alert box displaying the message
     */
    hideMessage() {
        this.setState({ msg: null, type: null });
    }

    confirmDlgClose(action) {
        if (action === 'yes') {
            this.props.controller.confirmDelete();
        }
        this.setState({ confirm: null });
    }

    render() {
        const msg = this.state.msg;
        const msgpanel = msg ? React.createElement(
            Alert,
            { bsStyle: this.state.type === 'error' ? 'danger' : 'warning',
                onDismiss: this.hideMessage,
                style: { marginTop: '10px', marginBottom: '10px' } },
            React.createElement(Errors, { messages: msg })
        ) : null;

        const confirm = this.state.confirm;

        const confirmDlg = confirm ? React.createElement(MessageDlg, { show: true,
            title: confirm.title,
            message: confirm.msg,
            type: 'YesNo',
            onClose: this.confirmDlgClose }) : null;

        return React.createElement(
            'div',
            null,
            msgpanel,
            confirmDlg
        );
    }
}

CrudMessage.propTypes = {
    controller: React.PropTypes.object.isRequired
};

export default controlWrapper(CrudMessage);