import React from 'react';
import {connect} from 'react-redux';
import {Map} from 'immutable'

import Page from 'trc-client-core/src/components/Page';
import Markdown from 'trc-client-core/src/components/Markdown';
import Widget from 'trc-client-core/src/components/Widget';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Icon from 'trc-client-core/src/components/Icon';
import Table from 'bd-stampy/components/Table';
import DataTable from 'bd-stampy/components/DataTable';

import RegionSelect from 'trc-client-core/src/components/RegionSelect';
import DealerSelect from 'trc-client-core/src/components/DealerSelect';
import ParticipantSearch from 'trc-client-core/src/participant/ParticipantSearch';
import {participantRequest} from 'trc-client-core/src/participant/ParticipantActions';
import ToggleGroup from 'trc-client-core/src/components/ToggleGroup';
import UserStore from 'trc-client-core/src/user/UserStore';

import SwitchUserIntro from 'trc-client-core/src/copy/admin/switch-user.md';



var SwitchUser = React.createClass({
    displayName: 'SwitchUser',
    contextTypes: {
        location: React.PropTypes.object
    },
    onChangeDealership(ee, details) {
        if(details.value) {
            this.props.dispatch(participantRequest({
                dealer: details.value
            }));
        }
    },
    getInitialState() {
        return {
            filterDepartment: null
        };
    },
    componentWillMount() {
        var {dealerCode} = this.context.location.query;
        if (dealerCode && dealerCode !== '') {
            this.props.dispatch(participantRequest({
                dealer: dealerCode
            }))
        }
    },
    onFilterDepartment(ee, details) {
        this.setState({
            filterDepartment: Map(details.value).filter(ii => ii === true).keySeq().get(0)
        });
    },
    render: function() {
        var tick = <td className="t-center"><Icon hexCode="E013" modifier="small" className="t-green"/></td>;
        var cross = <td className="t-center"><Icon hexCode="E014" modifier="small" className="t-red"/></td>;

        return (
            <Page title="Switch User">
                <div>

                    <h1><Icon hexCode="E084"/> Switch Users</h1>

                    <div className="Widget float-right margin-left2">
                        <Table modifier="tight" className="hug">
                            <thead>
                                <th></th>
                                <th className="t-center">Non-Manager</th>
                                <th className="t-center"><Icon hexCode="E008" size="small" className="margin-right05" />Manager</th>
                            </thead>
                            <tbody>
                                <tr><td>Request training course</td>{tick}{cross}</tr>
                                <tr><td>Approve training request</td>{cross}{tick}</tr>
                                <tr><td>Enrol staff in training courses</td>{cross}{tick}</tr>
                                <tr><td>Download Gap Reports</td>{cross}{tick}</tr>
                            </tbody>
                        </Table>
                    </div>

                    <Markdown html={SwitchUserIntro}  className="margin-top2" />

                    <Grid>
                        <Col>
                            <h2>Search By Dealer</h2>
                            {this.renderSearchByDealer()}
                            {this.renderDepartmentSelect()}
                            {this.renderUserSearchResultsTable()}
                        </Col>
                        <Col>
                            <h2>Search By Name</h2>
                            <ParticipantSearch tableColumns={['name', 'jobPositionDesc', 'dealerName']}/>
                        </Col>
                    </Grid>
                </div>
            </Page>
        );
    },
    renderSearchByDealer() {
        var {query} = this.context.location;
        var region;
        var regionCode = UserStore.get('currentBranchCode');

        if (UserStore.isnt('ROLE_REGIONAL_ADMIN')) {
            region = <Col>
                <RegionSelect value={query.regionCode || "ALL_REGIONS"} />
            </Col>;
            regionCode = query.regionCode;
        }

        return <Grid modifier="tight">
            {region}
            <Col>
                <DealerSelect
                    onChange={this.onChangeDealership}
                    value={query.dealerCode}
                    region={regionCode}
                    allDealers
                />
            </Col>
        </Grid>
    },
    renderDepartmentSelect() {
        if(this.props.dealer) {
            const toggles = this.props.dealer
                .map(ii => ii.get('department'))
                .toSet()
                .map(ii => ({label: ii, value: ii}))
                .toJS();
            return <ToggleGroup
                name="department"

                toggles={toggles}
                value={[this.state.filterDepartment]}
                onChange={this.onFilterDepartment}
            />;
        }
    },
    renderUserSearchResultsTable() {
        if(!this.props.dealer) {
            return null;
        }

        var tableSchema = [{
            heading: '',
            render: (user) => user.manager ? <Icon hexCode="E008" size="small" className="margin-right05" /> : null
        }, {
            heading: 'Name',
            filter: (user) => user.firstName + user.lastName,
            render: (user) => <a className="link" href={`/admin/tmca/switch-user?j_username=${user.participantId}`}>
                <span>{`${user.firstName} ${user.lastName}`}</span>
            </a>
        }, {
            heading: 'Job',
            filter: 'jobPositionDesc'
        }, {
            heading: 'Department',
            filter: 'department'
        }];

        return <DataTable
            className="margin-top"
            schema={tableSchema}
            search={this.state.filterDepartment || ''}
            data={this.props.dealer.toJS()}
            modifier="data"
        />;
    }
});

module.exports = connect(
    state => ({dealer: state.participant.get('participant')})
)(SwitchUser);