'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import BSPanel from 'react-bootstrap/lib/Panel';
import classnames from 'classnames';
import {Button} from './Button';
import {Icon} from './Icon';

export class Panel extends React.Component {
    static propTypes = {
        children: PropTypes.node,
        className: PropTypes.string,
        header: PropTypes.node,
        footer: PropTypes.node,
        testAutomationId: PropTypes.string,
        closable: PropTypes.bool,
        noPadding: PropTypes.bool,
        noHeaderPadding: PropTypes.bool,
        noBorder: PropTypes.bool,
        noLeftBorder: PropTypes.bool,
        noRightBorder: PropTypes.bool,
        cancelMinHeight: PropTypes.bool,
        smallHeaderPadding: PropTypes.bool,
        addHeaderBorder: PropTypes.bool,
        noHeaderBorder: PropTypes.bool,
        onClose: PropTypes.func,
        flexContent: PropTypes.bool,
        flexContainer: PropTypes.bool,
        isTransparent: PropTypes.bool,
        cancelBottomOffset: PropTypes.bool,
        closeLabel: PropTypes.string
    };

    static defaultProps = {
        children: null,
        className: null,
        header: null,
        footer: null,
        testAutomationId: 'panel',
        closable: false,
        noPadding: false,
        noHeaderPadding: false,
        noBorder: false,
        noLeftBorder: false,
        noRightBorder: false,
        cancelMinHeight: false,
        smallHeaderPadding: false,
        addHeaderBorder: false,
        noHeaderBorder: false,
        onClose: null,
        flexContent: false,
        flexContainer: false,
        isTransparent: false,
        cancelBottomOffset: false,
        closeLabel: 'TRANSLATE:CLOSE'
    };

    constructor(props, context) {
        super(props, context);
    }

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

    render() {
        let {
            onClose,
            className,
            closable,
            closeLabel,
            noPadding,
            noHeaderPadding,
            smallHeaderPadding,
            cancelMinHeight,
            noBorder,
            noLeftBorder,
            noRightBorder,
            addHeaderBorder,
            noHeaderBorder,
            testAutomationId,
            flexContent,
            flexContainer,
            cancelBottomOffset,
            isTransparent,
            ...props
        } = this.props;

        const containerClassName = classnames('rc-panel', {
            'rc-panel-flexContainer': flexContainer
        });

        return (
            <div className={containerClassName} data-test-automation-id={testAutomationId}>
                {this.getCloseButton()}
                <BSPanel
                    className={classnames(
                        {
                            'rc-panel-noPadding': noPadding,
                            'rc-panel-noHeaderPadding': noHeaderPadding,
                            'rc-panel-cancelMinHeight': cancelMinHeight,
                            'rc-panel-noBorder': noBorder,
                            'rc-panel-noLeftBorder': noLeftBorder,
                            'rc-panel-noRightBorder': noRightBorder,
                            'rc-panel-noHeaderBorder': noHeaderBorder,
                            'rc-panel-addHeaderBorder': addHeaderBorder,
                            'rc-panel-smallHeaderPadding': smallHeaderPadding, //FIXME
                            'rc-panel-flexContent': flexContent,
                            'rc-panel-noBottomOffset': cancelBottomOffset,
                            'rc-panel-transparent': isTransparent
                        },
                        className
                    )}
                    {...props}>
                    {this.props.children}
                </BSPanel>
            </div>
        );
    }
}
