var React = require('react');
var Input = require('bd-stampy/components/InputElement');
import AutoRequest from 'trc-client-core/src/components/AutoRequest';
import {connect} from 'react-redux';
import {requestManagers} from 'trc-client-core/src/participant/ParticipantActions';
import Select from 'trc-client-core/src/components/Select';

var ManagerSelectForm = React.createClass({
    displayName: 'ManagerSelectForm',
    
    propTypes: {
        managers: React.PropTypes.array.isRequired,
        name: React.PropTypes.string.isRequired,
        onChange: React.PropTypes.func,
        reqeust: React.PropTypes.bool
    },
    componentWillMount(){
        this.props.dispatch(requestManagers())
    },
    onChange(e, details) {
        if(this.props.onChange) {
            this.props.onChange(e, details);
        }
    },
    render: function () {
        // return <div>
        //     {this.props.managers.map((manager, key) => {
        //         return <label key={key} className="Label">
        //             <Input name={this.props.name} type="radio" ref="radio" value={manager.participantId} onChange={this.onChange}/>
        //             {manager.firstName} {manager.lastName}
        //         </label>;
        //     })}
        // </div>;

        return <Select 
            name="manager" 
            placeholder="Select a manager."
            onChange={this.onChange}
            options={this.props.managers.map((manager, key) => {
                return {
                    value: manager.participantId,
                    label: `${manager.firstName} ${manager.lastName}`
                }
            })}
        />
    }
});

module.exports = connect(state => ({
    managers: state.participant.get('managers').toJS()
}))(ManagerSelectForm);