import DataTable from 'bd-stampy/components/DataTable';
import DealershipActions from 'trc-client-core/src/portal/DealershipActions';
import DealershipStore from 'trc-client-core/src/portal/DealershipStore';
import LearningPlanList from 'trc-client-core/src/learningPlan/LearningPlanList';
import Loader from 'trc-client-core/src/components/Loader';
import React from 'react';
import Reflux from 'reflux';
import StoreMixin from 'reflux-immutable/StoreMixin';
import Table from 'bd-stampy/components/Table';
import ToggleGroup from 'trc-client-core/src/components/ToggleGroup';
import UserStore from 'trc-client-core/src/user/UserStore.js';
import {fromJS} from 'immutable';
import {Link} from 'react-router';

var departments = [
    {label: 'Sales & Fleet', value: 'sales'},
    {label: 'Parts', value: 'parts'},
    {label: 'Service', value: 'service'},
    {label: 'Management & Admim', value: 'management'},
    {label: 'Body & Paint', value: 'body_paint'}
];

var DealershipDetailsView = React.createClass({
    displayName: 'DealershipDetailsView',
    mixins:[
        StoreMixin,
        Reflux.listenTo(DealershipStore, 'onStoreChange')
    ],
    getStoreState() {
        return {
            dealershipDetails : DealershipStore.get('dealershipDetails'),
            departmentFilter : []
        };
    },
    componentDidMount: function () {
        DealershipActions.fetchDealershipDetails({
            participantId: UserStore.get('participantId')
        });
    },
    onToggleDepartment: function (e, selected) {
        var current = Object.keys(selected.value).filter(ii => selected.value[ii]);
        if (current) {
            this.setState({departmentFilter: current});
        }
    },
    render: function () {
        if(!this.state.dealershipDetails){
            return <Loader></Loader>;
        }
        return (
            <div>
                <h1>{this.state.dealershipDetails.toJS().viewedParticipant.dealerName}</h1>
                <ToggleGroup className="margin-bottom2" name="Departments" toggles={departments} value={this.state.departmentFilter} onChange={this.onToggleDepartment}/>
                {this.renderDealershipDetails(this.state.dealershipDetails.toJS().staffs) }
            </div>
        );
    },
    renderDealershipDetails(data) {
        if(!data){
            return <Loader></Loader>;
        }

        var departmentCurrent = this.state.departmentFilter[0];
        var careerPlans = this.state.dealershipDetails.toJS().staffCareerPlans;
        var tableSchema = [{
                heading: 'Name',
                filter: item => item.fullName,
                render: item => <Link className="link" to={`/portal/${item.participantId}`}>{item.fullName}</Link>
            }, {
                heading: 'Job Title',
                filter: 'jobPositionDesc'
            }, {
                heading: 'Department',
                filter: 'departmentCategory',
                width: '20%',
                render: item => {
                    var departments = item.departmentCategory.map((item, key) => {
                        return <li className="t-capitalize" key={key}>{item === 'body_paint' ? 'body & paint' : item}</li>
                    });
                    return <ul>
                        {departments}
                    </ul>
                }
            }, {
                heading: 'Learning Plans',
                width: '50%',
                filter: (item) => careerPlans[item.participantId].length,
                render: (item) => <LearningPlanList linkClassName="link" learningPlans={fromJS(careerPlans[item.participantId])} participantId={item.participantId}/>
            }];

        var rows  = data.filter(item => {
            if(departmentCurrent){
                return item.departmentCategory.indexOf(departmentCurrent) !== -1;
            } else {
                return true;
            }
        });

        return <DataTable
            modifier="data top"
            schema={tableSchema}
            data={rows}
        />;

    },
    renderTable(rows, emptyText) {
        var empty = <em className="InfoBox">{emptyText}</em>;
        return (
                <div className="row">
                    <Table type="data" modifier="data" empty={empty}>
                        {rows}
                    </Table>
                </div>
        );
    }
});

module.exports = DealershipDetailsView;