import FullscreenButton from 'trc-client-core/src/components/FullscreenButton';
import Icon from 'trc-client-core/src/components/Icon';
import LearningPlanFooter from 'trc-client-core/src/learningPlan/LearningPlanFooter';
import LearningPlanHeader from 'trc-client-core/src/learningPlan/LearningPlanHeader';
import ModalGapReportLegend from 'trc-client-core/src/Modal/ModalGapReportLegend';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import Page from 'trc-client-core/src/components/Page';
import React from 'react';
import UserStore from 'trc-client-core/src/user/UserStore';
import Permissions from 'trc-client-core/src/user/Permissions';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import {settingsToggleFullscreen} from 'trc-client-core/src/settings/SettingsActions';

var GapReport = React.createClass({
    displayName: 'GapReport',
    contextTypes: {
        location: React.PropTypes.object,
        gapReportName: React.PropTypes.string
    },
    showLegend() {
        ModalManager.showModal(ModalGapReportLegend, {children: this.props.legend});
    },
    toggleFullscreen() {
        this.setState({fullscreen: !this.state.fullscreen});
    },
    getDealership() {
        if(Permissions.isPermission("ALL_ADMINS")) {
            return this.props.dealer.dealerCodes
                .find(ii => ii.get('value') === this.context.location.query.dealerCode, this, Map({label: ''}))
                .get('label');
        }
        return UserStore.get('dealerName');
    },
    render() {
        var {location, gapReportName} = this.context;
        var {toolbar, gapReport, settings, settingsToggleFullscreen, learningPlanId, learningPlan} = this.props;
        if(learningPlanId === "technical_overview"){
            gapReportName = "Technical"
        }
        return (
            <Page title={`${gapReportName || this.props.name} Gap Report`}>
                <div>
                    <FullscreenButton
                        value={settings.getIn(['fullscreen', (location.pathname)])}
                        dispatch={settingsToggleFullscreen.bind(null, (location.pathname))}
                    />
                    <h1>
                        <span>{gapReportName || this.props.name} Gap Report <Icon name="circleinfo" onClick={this.showLegend} className="hide-print" /></span>
                        <div className="t-muted">{this.getDealership()} </div>
                    </h1>
                    <LearningPlanHeader learningPlan={learningPlan}/>
                    <div className="hide-print clearfix">{React.cloneElement(toolbar, this.props)}</div>
                    {React.cloneElement(gapReport, this.props)}
                    <LearningPlanFooter learningPlan={learningPlan}/>
                </div>
            </Page>
        );
    }
});

function getLearningPlanId(learningPlanId) {
    switch(learningPlanId) {
        case 'toyota-for-life':
            return 'tfl_sales_fleet';
        default:
            return learningPlanId;
    }
}

export default connect((state, props) => {
    return {
        settings: state.settings,
        dealer: state.dealer,
        learningPlan: state.gapReport.getIn([getLearningPlanId(props.learningPlanId), 'learningPlan'])
    }
}, {settingsToggleFullscreen})(GapReport);