import React from 'react';
import {Link} from 'react-router';

import Auth from 'trc-client-core/src/components/Auth';
import Col from 'trc-client-core/src/components/Col';
import DealerSelect from 'trc-client-core/src/components/DealerSelect';
import GapReportUser from 'trc-client-core/src/report/GapReportUser';
import Grid from 'trc-client-core/src/components/Grid';
import Input from 'trc-client-core/src/components/Input';
import Label from 'bd-stampy/components/Label';
import RegionSelect from 'trc-client-core/src/components/RegionSelect';
import Select from 'trc-client-core/src/components/Select';

import {gapReportUrl} from 'trc-client-core/src/constants/url';

class GapReportToolbar extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.displayName = 'GapReportToolbar';
    }

    clearDealership() {
        var query = this.props.location.query;
        query.dealerCode = "";
        this.props.history.replaceState(null, this.props.location.pathname, query);
    }

    render() {
        var {learningPlanId} = this.context;
        if(this.props.params.gapReportView === 'table') {
            return null;
        }

        const region = this.props.location.query.region || GapReportUser.getDetails().region;

        // DIRTY HACK!!!!
        // only warranty_admin_plan needs to see some of these features for now until we can test on all other gap reports ofr stability on large reports (12 May 2016)
        var reportFilter = null;
        var dealerFilter = null;
        if(learningPlanId == 'warranty_admin_plan') {
            reportFilter = (
                <Auth isPermission="REPORT_VISIBILITY_NATIONAL">
                    <Col width={2}>
                        <Label>Region</Label>
                        <RegionSelect value={this.props.location.query.region} name="region" onChange={this.clearDealership.bind(this)} />
                    </Col>
                </Auth>
            );

            dealerFilter = (
                <Auth isPermission="REPORT_VISIBILITY_REGIONAL">
                    <Col>
                        <Label>Dealership</Label>
                        <DealerSelect value={this.props.location.query.dealerCode} allDealers region={region}  />
                    </Col>
                </Auth>
            );
        } else {
            dealerFilter = (
                <Auth isPermission="REPORT_VISIBILITY_REGIONAL">
                    <Col>
                        <Label>Dealership</Label>
                        <DealerSelect value={this.props.location.query.dealerCode} />
                    </Col>
                </Auth>
            );
        }

        return <div className="padding-top05">
            <Grid modifier="tight">
                {reportFilter}
                {dealerFilter}
                <Col width={3}>
                    <Label>Sort by</Label>
                    <Auth isPermission="REPORT_VISIBILITY_REGIONAL">
                        <Select
                            name="sort"
                            queryString
                            value={this.props.location.query.sort || 'Name'}
                            options={[
                                {label: 'Name', value: null},
                                {label: 'Job Position', value: 'jobPositionDesc'},
                                {label: 'Department', value: 'department'},
                                {label: 'Dealership', value: 'dealerName'}
                            ]}
                        />
                    </Auth>
                    <Auth isntPermission="REPORT_VISIBILITY_REGIONAL">
                        <Select
                            name="sort"
                            queryString
                            value={this.props.location.query.sort || 'Name'}
                            options={[
                                {label: 'Name', value: null},
                                {label: 'Job Position', value: 'jobPositionDesc'},
                                {label: 'Department', value: 'department'}
                            ]}
                        />
                    </Auth>
                </Col>
                <Col width={2}>
                    <Label>Filter</Label>
                    <Input name="filter" debounce queryString/>
                </Col>
            </Grid>

            <div className="right clear t-right">
                <Link className="Link block" to={gapReportUrl({learningPlanId, view:'table', query: this.props.location.query})}>View as table</Link>
                {this.renderExtraLinks()}
            </div>
        </div>;
    }
    renderExtraLinks() {
        switch(this.context.learningPlanId) {
            case 'technical_overview':
                return <Link to="/gapreport/technical_career_plan">View Full Learning Plan</Link>
            case 'technical_career_plan':
                return <Link to="/gapreport/technical_overview">View Overview</Link>
        }
    }
}

GapReportToolbar.contextTypes = {
    learningPlanId: React.PropTypes.string.isRequired,
    router: React.PropTypes.object
};

export default GapReportToolbar;