import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dropdown, Form } from 'semantic-ui-react';

import { fetchMembersList } from '../../../store/actions';

class MemberSelector extends Component {
    componentDidMount() {
        const { fetchMembersList } = this.props;

        fetchMembersList();
    }

    onMemberSelectionChange(event, data){
        const { onMemberSelect } = this.props;

        const { value } = data;

        if (onMemberSelect && value){
            onMemberSelect(value);
        }
    }

    render(){
        const { members, defaultMemberId } = this.props;

        const dropdownOptions = members && Array.isArray(members) ? members.map(member => ({
                key: member.memberId,
                value: member.memberId,
                text: member.name
            })
        ) : null;

        return (
            <Form>
                <label>{'\u00A0'}</label>
                <Dropdown
                    options={dropdownOptions}
                    placeholder="Select Member"
                    selection
                    search
                    fluid
                    onChange={this.onMemberSelectionChange.bind(this)}
                    value={defaultMemberId ? defaultMemberId : null}
                />
            </Form>
        );
    }
}

const mapStateToProps = (state) => ({
    members: state.membersList.result,
});

const mapDispatchToProps = (dispatch) => ({
    fetchMembersList: () => fetchMembersList(dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(MemberSelector);