import React from 'react';
import PropTypes from 'prop-types';
import Collapse from 'react-bootstrap/lib/Collapse';
import {Button} from './Button';
import {Block} from './Block';
import {Icon} from './Icon';
import {Row} from './Row';
import Col from 'react-bootstrap/lib/Col';

export class CollapsibleToolbar extends React.Component {
    static propTypes = {
        testAutomationId: PropTypes.string,
        header: PropTypes.arrayOf(PropTypes.node).isRequired,
        collapsibleContent: PropTypes.node.isRequired,
        footer: PropTypes.node,
        hasBodyPadding: PropTypes.bool,
        moreButtonText: PropTypes.string,
        moreButtonLabel: PropTypes.string
    };

    static defaultProps = {
        testAutomationId: 'collapsibleToolbar',
        moreButtonText: 'TRANSLATE:MORE',
        moreButtonLabel: 'TRANSLATE:MORE_ADVANCED_FILTERS',
        hasBodyPadding: true,
        footer: null
    };

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

        this.state = {
            isCollapsed: true
        };
    }

    handleToggleClick() {
        this.setState({
            isCollapsed: !this.state.isCollapsed
        });
    }

    getMoreButton() {
        const {isCollapsed} = this.state;
        const {moreButtonText, moreButtonLabel} = this.props;
        let iconName = isCollapsed ? 'chevron-down-small' : 'chevron-up-small';
        return (
            <Button
                aria-label={moreButtonLabel}
                aria-expanded={!isCollapsed}
                onClick={this.handleToggleClick.bind(this)}
                withIcon
                bsStyle="link">
                {moreButtonText}
                <Icon name={iconName} />
            </Button>
        );
    }

    wrapMoreButton(moreButton) {
        return <Col xs={2}>{moreButton}</Col>;
    }

    render() {
        const {header, footer, collapsibleContent, hasBodyPadding, testAutomationId} = this.props;

        let headline = (
            <Row>
                {header}
                {this.wrapMoreButton(this.getMoreButton())}
            </Row>
        );

        let body;
        if (hasBodyPadding) {
            body = (
                <Block noOffset>
                    <Block condensed />
                    {collapsibleContent}
                </Block>
            );
        } else {
            body = collapsibleContent;
        }

        return (
            <div data-test-automation-id={testAutomationId}>
                {headline}
                <Collapse in={!this.state.isCollapsed}>{body}</Collapse>
                {footer}
            </div>
        );
    }
}
