import React from 'react';
import { Row, Col } from 'react-bootstrap';
import VariablesBox from './variables-box';

export default class VariablesSelector extends React.Component {

    constructor(props) {
        super(props);
        this.changeColumnVars = this.changeColumnVars.bind(this);
        this.changeRowVars = this.changeRowVars.bind(this);
    }

    changeColumnVars(vars) {
        this.props.onChange(vars, this.props.indicator.rowVariables);
    }

    changeRowVars(vars) {
        this.props.onChange(this.props.indicator.columnVariables, vars);
    }

    render() {
        const ind = this.props.indicator;

        return React.createElement(
            'div',
            { className: 'var-selector' },
            React.createElement(
                Row,
                null,
                React.createElement(
                    Col,
                    { md: 6 },
                    React.createElement(
                        'div',
                        { className: 'text-muted text-uppercase' },
                        __('global.table.columns')
                    ),
                    React.createElement(
                        'div',
                        { className: 'mtop' },
                        React.createElement(VariablesBox, {
                            variables: this.props.variables,
                            values: ind.columnVariables,
                            onChange: this.changeColumnVars
                        })
                    )
                ),
                React.createElement(
                    Col,
                    { md: 6 },
                    React.createElement(
                        'div',
                        { className: 'text-muted text-uppercase' },
                        __('global.table.rows')
                    ),
                    React.createElement(
                        'div',
                        { className: 'mtop' },
                        React.createElement(VariablesBox, {
                            variables: this.props.variables,
                            values: ind.rowVariables,
                            onChange: this.changeRowVars
                        })
                    )
                )
            )
        );
    }
}

VariablesSelector.propTypes = {
    variables: React.PropTypes.array.isRequired,
    indicator: React.PropTypes.object.isRequired,
    onChange: React.PropTypes.func.isRequired
};