import React from 'react';
import PropTypes from 'prop-types';

export default class Alert extends React.Component {
    constructor() {
        super();

        this.withCloseClassName = '';
        this.btnClose = '';
        this.toggle = {
            display: 'block'
        };
    }

    componentWillMount() {
        if (this.props.withClose) {
            this.btnClose = (
                <button
                    type='button'
                    className='close'
                    data-dismissible='alert'
                    aria-label='Close'
                >
                    <span
                        aria-hidden='true'
                        style={{color: '#000'}}
                    >{'x'}</span>
                </button>
            );
        }
    }

    render() {
        return (
            <div
                id='flash'
                style={this.toggle}
            >
                <div
                    className={this.props.className + this.withCloseClassName}
                    role='alert'
                >
                    {this.btnClose}
                    <i className={this.props.iconClass}></i>
                    {this.props.children}
                </div>
            </div>
        );
    }
}

Alert.propTypes = {
    className: PropTypes.string,
    iconClass: PropTypes.string,
    withClose: PropTypes.bool,
    children: PropTypes.any
};

Alert.defaultProps = {
    className: 'alert flash-success',
    iconClass: 'fa fa-check-circle-o',
    withClose: false,
    children: ''
};
