import React from 'react';
import {State, History} from 'react-router';
import ServiceExcellenceChart from 'trc-client-core/src/report/ServiceExcellenceChart';

import {ALL_REGIONS} from 'trc-client-core/src/constants/Region';
import {SERVICE_EXCELLENCE_ENDPOINT_CSV} from 'trc-client-core/src/constants/Endpoints';

import RegionSelect from 'trc-client-core/src/components/RegionSelect';
import DealerSelect from 'trc-client-core/src/components/DealerSelect';
import Col from 'trc-client-core/src/components/Col';
import Label from 'bd-stampy/components/Label';
import Grid from 'trc-client-core/src/components/Grid';

import Permissions from 'trc-client-core/src/user/Permissions';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import InformationModal from 'trc-client-core/src/components/InformationModal';
import Icon from 'trc-client-core/src/components/Icon';
import Markdown from 'trc-client-core/src/components/Markdown';
import PrintChartView from 'trc-client-core/src/report/PrintChartView';

import ServiceExcellenceReportLegend from 'trc-client-core/src/copy/report/ServiceExcellenceReportLegend';

var ServiceExcellenceReport = React.createClass({
    displayName: 'ServiceExcellenceReport', 
    mixins: [
        State, History
    ],
    statics: {
        willTransitionTo(transition) {
            if (!Permissions.get('SERVICE_EXCELLENCE_REPORT') && transition.path !== '/unauthorized') {
                transition.redirect('/unauthorized');
            }
        }
    },
    getInitialState() {
        return {
            regionCode: this.props.location.query.regionCode || ALL_REGIONS,
            dealerCode: this.props.location.query.dealerCode 
        };
    },
    onChange(ee, details) {
        this.setState({
            dealerCode: null, // Make sure dealercode is reset to null if not provided
            regionCode: null,
            [details.key]: details.value
        });

        this.history.replaceState(null, '/report/service-excellence', {
            dealerCode: undefined, // Make sure dealercode is reset to null if not provided
            [details.key]: details.value
        })
    },
    onShowLegend: function (markdown) {
        ModalManager.showModal(InformationModal, {
            title: markdown.title,
            children: <Markdown html={markdown}/>
        });
    },
    render: function () {       
        var {location} = this.props;
        return <div>
            <h1>Service Excellence <Icon name="circleinfo" onClick={this.onShowLegend.bind(this, ServiceExcellenceReportLegend)}/></h1>
            {this.renderQuery()}
            <ServiceExcellenceChart {...this.state}/>
            <PrintChartView href={SERVICE_EXCELLENCE_ENDPOINT_CSV + '?' + (location.pathname+location.search).split('?')[1]} />
        </div>;
    },
    renderQuery() {
        return <Grid className="margin-bottom2">
            <Col>
                <Label>Region Code</Label>
                <RegionSelect onChange={this.onChange} value={this.state.regionCode} />
            </Col>
            <Col>
                <Label>Dealership</Label>
                <DealerSelect onChange={this.onChange} value={this.state.dealerCode } region={this.state.regionCode}/>
            </Col>
            <Col></Col>
        </Grid>;
    }
});

export default ServiceExcellenceReport;