// Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
// See LICENSE.txt for license information.

import $ from 'jquery';
import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router';

import Constants from '../utils/constants.jsx';

const messageType = Constants.MessageType;

export default class MessageBar extends React.Component {
    constructor(props) {
        super(props);
        this.fadeOut = this.fadeOut.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }
    componentWillMount() {
        if (this.props.message) {
            this.setState({message: this.props.message});
        }
    }
    componentWillReceiveProps(newProps) {
        this.setState({message: newProps.message});
    }
    componentDidMount() {
        this.fadeOut(this.props.autocloseInSecs * 1000);
    }
    componentDidUpdate() {
        this.fadeOut(this.props.autocloseInSecs * 1000);
    }
    fadeOut(time) {
        const self = this;
        if (self.state.message && self.props.autoclose) {
            $('div.flash').delay(time).fadeOut(1000, () => {
                self.handleClose();
            });
        }
    }
    handleClose() {
        this.setState({message: null});
    }
    render() {
        const message = this.state.message;
        if (message) {
            let dismissible;
            let closeButton;
            if (this.props.canClose) {
                dismissible = 'alert-dismissible';
                closeButton = (
                    <button
                        type='button'
                        className='close'
                        data-dismiss='alert'
                        aria-label='Close'
                        onClick={() => this.handleClose(500)}
                    >
                        <span
                            aria-hidden='true'
                            style={{color: '#fff'}}
                        >
                            {'x'}
                        </span>
                    </button>
                );
            }

            const link = this.props.link;
            const linkText = this.props.linkText ? this.props.linkText : link;
            let messageLink;
            if (link) {
              messageLink = (
                <span> -
                  <Link to={link}
                    style={{color: '#fff'}}
                  >
                    {` ${linkText}`}
                  </Link>
                </span>
              );
            }

            const alertClass = `alert flash-${this.props.type.toLowerCase()} ${dismissible}`;
            let icon;
            switch (this.props.type) {
            case messageType.ERROR:
                icon = (<i className='fa fa-exclamation-circle'></i>);
                break;
            case messageType.INFO:
                icon = (<i className='fa fa-info-circle'></i>);
                break;
            case messageType.SUCCESS:
                icon = (<i className='fa fa-check-circle'></i>);
                break;
            case messageType.WARNING:
                icon = (<i className='fa fa-exclamation-triangle'></i>);
                break;
            }

            return (
                <div
                    className='flash'
                    style={{position: this.props.position, display: 'block'}}
                >
                    <div
                        className={alertClass}
                        role='alert'
                    >
                        {closeButton}
                        {icon} {message} {messageLink}
                    </div>
                </div>
            );
        }

        return <div/>;
    }
}

MessageBar.defaultProps = {
    message: null,
    type: 'ERROR',
    position: 'relative',
    canClose: true,
    autoclose: false,
    autocloseInSecs: 10,
    link: null,
    linkText: null
};

MessageBar.propTypes = {
    message: PropTypes.string.isRequired,
    type: PropTypes.oneOf(['SUCCESS', 'ERROR', 'WARNING', 'INFO', 'LOCKED']),
    position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'inherit']),
    canClose: PropTypes.bool,
    autoclose: PropTypes.bool,
    autocloseInSecs: PropTypes.number,
    link: PropTypes.string,
    linkText: PropTypes.string
};
