import React from 'react';
import {connect} from 'react-redux';
import {requestParticipantList} from 'trc-client-core/src/participant/ParticipantActions';
import {IS_TECH_STAFF} from 'trc-client-core/src/constants/PredefinedQuerys';

var TYPE_QUERIES = {
    technical: {
        current_dealer: true,
        predefined: IS_TECH_STAFF
    }
}

class ParticipantList extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ParticipantList';
    }
    componentWillMount() {
        var query = this.props.query || TYPE_QUERIES[this.props.type];
        this.props.dispatch(requestParticipantList(query));
    }
    render() {
        return <ul className={this.props.className}>{this.props.participants.map(this.props.renderItem)}</ul>;
    }
}

ParticipantList.defaultProps = {
    renderItem: (item, key) => <li key={key}>{item.get('firstName')} {item.get('lastName')}</li>
}

export default connect(
    state => ({
        participants: state.participant.get('list')
    })
)(ParticipantList);