'use strict';

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

type PanelProps = {
    header?: React.ReactNode;
    footer?: React.ReactNode;
    testAutomationId?: string;
    closable?: boolean;
    noPadding?: boolean;
    noHeaderPadding?: boolean;
    noBorder?: boolean;
    noLeftBorder?: boolean;
    noRightBorder?: boolean;
    cancelMinHeight?: boolean;
    smallHeaderPadding?: boolean;
    addHeaderBorder?: boolean;
    noHeaderBorder?: boolean;
    onClose?: Function;
    flexContent?: boolean;
    isTransparent?: boolean;
    closeLabel?: string;
    flexContainer?: any;
    cancelBottomOffset?: any;
} & Partial<PanelDefaultProps> &
    React.HTMLProps<Panel>;

type PanelDefaultProps = {
    testAutomationId: string;
    closable: boolean;
    noPadding: boolean;
    noHeaderPadding: boolean;
    noBorder: boolean;
    noLeftBorder: boolean;
    noRightBorder: boolean;
    cancelMinHeight: boolean;
    smallHeaderPadding: boolean;
    addHeaderBorder: boolean;
    noHeaderBorder: boolean;
    flexContent: boolean;
    isTransparent: boolean;
    closeLabel: string | null;
};

export class Panel extends React.Component<PanelProps> {
    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,
        get closeLabel() {
            return lang.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 as any}
                    aria-label={this.props.closeLabel}>
                    <Icon name="close" />
                </Button>
            );
        }
        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 as any}>
                    {this.props.children}
                </BSPanel>
            </div>
        );
    }
}
