import React from 'react';
import {connect} from 'react-redux';
import DataTable from 'bd-stampy/components/DataTable';
import Input from 'bd-stampy/components/InputElement';
import {participantSearchRequest} from 'trc-client-core/src/participant/ParticipantActions';

const SCHEMA_OPTIONS = {
    name: {
        heading: 'Name',
        filter: (user) => user.firstName + user.lastName,
        render: (user) => <a className="link" href={`/admin/tmca/switch-user?j_username=${user.participantId}`}>{user.firstName + ' ' + user.lastName}</a>
    },
    jobPositionDesc: {
        heading: 'Job',
        filter: 'jobPositionDesc'
    },
    regionCode: {
        heading: 'Region',
        filter: 'regionCode'
    },
    department: {
        heading: 'Department',
        filter: 'department'
    },
    dealerName: {
        heading: 'Dealership',
        filter: 'dealerName'
    }
}

var ParticipantSearch = React.createClass({
    displayName: 'ParticipantSearch',
    onChange(ee, data) {
        console.log()
        this.setState({[data.key]: data.value})
    },
    getDefaultProps() {
        return {
            tableColumns: [
                'name',
                'jobPositionDesc',
                'regionCode',
                'department',
                'dealerName'
            ]
        };
    },
    onSearchUsers(ee) {
        ee.stopPropagation();
        ee.preventDefault();

        this.props.dispatch(participantSearchRequest(this.state));
    },
    render() {
        return (
            <form onSubmit={this.onSearchUsers}>
                <Input
                    name="name"
                    className="float-left w70"
                    onChange={this.onChange}
                    placeholder="Search Users"
                />
                <button className="Button w30">Search</button>
                {this.renderUserSearchResultsTable()}
            </form>
        );
    },
    renderUserSearchResultsTable() {
        if(!this.props.searchResults) {
            return null;
        }

        return <DataTable
            schema={this.props.tableColumns.map(ii => SCHEMA_OPTIONS[ii])}
            data={this.props.searchResults.toJS()}
            modifier="data"
        />;
    }
});

module.exports = connect(
    state => ({searchResults: state.participant.get('search')})
)(ParticipantSearch);