import React from 'react';
import * as PropTypes from 'prop-types';

// Header component to be used as default for all the columns.
export default class HeaderGroupComponent extends React.Component {

    constructor(props) {
        super(props);
        this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
        this.state = {
            expanded: null
        };
    }

    componentDidMount() {
        this.onExpandChanged();
    }

    render() {
        let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded" : " collapsed");

        return <div>
            <div className="customHeaderLabel"> {this.props.displayName}</div>
            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i
                className="fa fa-arrow-right"/></div>
        </div>
    }

    expandOrCollapse() {
        this.props.setExpanded(!this.state.expanded);
    };

    onExpandChanged() {
        this.setState({
            expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
        })
    }
}

// the grid will always pass in one props called 'params',
// which is the grid passing you the params for the cellRenderer.
// this piece is optional. the grid will always pass the 'params'
// props, so little need for adding this validation meta-data.
HeaderGroupComponent.propTypes = {
    params: PropTypes.object
};