var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import { Collapse, Row } from 'react-bootstrap';

/**
 * A simple row component with support for additional content that is
 * expanded or collapsed on users click
 */
export default class CollapseRow extends React.Component {

    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
        this.state = { collapse: this.props.collapse };
    }

    /**
     * Called when user clicks on the row
     * @param  {[type]} evt [description]
     * @return {[type]}     [description]
     */
    onClick(evt) {
        if (!evt.isPropagationStopped()) {
            this.setState({ collapse: !this.state.collapse });
        }
    }

    render() {
        const props = Object.assign({}, this.props);
        delete props.collapsable;

        return React.createElement(
            Row,
            _extends({}, props, { onClick: this.onClick, className: 'collapse-row ' + props.className }),
            this.props.children,
            React.createElement(
                Collapse,
                { 'in': !this.state.collapse },
                this.props.collapsable
            )
        );
    }
}

CollapseRow.propTypes = {
    className: React.PropTypes.string,
    children: React.PropTypes.any,
    style: React.PropTypes.object,
    onClick: React.PropTypes.func,
    collapsable: React.PropTypes.any,
    collapse: React.PropTypes.bool
};

CollapseRow.defaultProps = {
    collapse: true
};