'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {Button} from './Button';
import {Icon} from './Icon';
import lang from '../../lang/common/index-en_US';

export class Banner extends React.Component<any> {
    static propTypes = {
        arrowOffset: PropTypes.string,
        arrowColsOffset: PropTypes.number,
        additionalOffset: PropTypes.number,
        closable: PropTypes.bool,
        closeLabel: PropTypes.string,
        onClose: PropTypes.func,
        children: PropTypes.node,
        className: PropTypes.string
    };

    static defaultProps = {
        arrowOffset: '50%',
        arrowColsOffset: 0,
        additionalOffset: 0,
        closable: false,
        get closeLabel() {
            return lang.CLOSE;
        },
        onClose: null,
        children: null,
        className: null
    };

    getCloseButton() {
        if (!this.props.closable) {
            return null;
        }
        return (
            <Button
                iconOnly
                bsStyle="link"
                className="rc-banner-close-button"
                testAutomationId="closeButton"
                onClick={this.props.onClose}
                aria-label={this.props.closeLabel}>
                <Icon name="close" />
            </Button>
        );
    }

    render() {
        let {children, className, arrowOffset, arrowColsOffset, additionalOffset} = this.props;

        if (arrowColsOffset > 11 || arrowColsOffset < 0) {
            // eslint-disable-next-line
            console.error('arrowColsOffset must be between 1 and 11');
        }

        let classNames = classnames('rc-banner', className);

        let arrowStyle = {
            left: arrowColsOffset !== null ? (100 / 12) * arrowColsOffset + '%' : arrowOffset,
            marginLeft: additionalOffset
        };

        return (
            <div className="rc-banner-wrap">
                <div className="rc-banner-triangle-top" style={arrowStyle}>
                    <div className="rc-banner-triangle-inner">
                        <div className="rc-banner-triangle-border" />
                        <div className="rc-banner-triangle-fill" />
                    </div>
                </div>
                {this.getCloseButton()}
                <div className={classNames}>{children}</div>
            </div>
        );
    }
}
