import React from 'react';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';

import RegionSelect from 'trc-client-core/src/components/RegionSelect';
import YearSelect from 'trc-client-core/src/components/YearSelect';
import TechnicalTrainerSelect from 'trc-client-core/src/components/TechnicalTrainerSelect';

var TargetedSizeQueryView = React.createClass({
    displayName: 'TargetedSizeQueryView',
    onChange: function (ee, details) {
        if(this.props.onChange) {
            this.props.onChange(ee, details);
        }
    },
    render: function () {
        
        return (
            <div className="hide-print">
                <Grid>
                    <Col>
                        <YearSelect name="fiscalYear" value={this.props.formData.fiscalYear} onChange={this.onChange} to={2013}/>
                    </Col>
                    <Col>
                        <RegionSelect value={this.props.formData.regionCode} onChange={this.onChange} />
                    </Col>
                    <Col>
                        <TechnicalTrainerSelect value={this.props.formData.trainerName} regionCode={this.props.formData.regionCode} onChange={this.onChange} />
                    </Col>
                    <Col>
                    </Col>
                </Grid>
            </div>
        );
    }
});

module.exports = TargetedSizeQueryView;