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

import ErrorMessage from 'trc-client-core/src/components/ErrorMessage';
import GapReportGrid from 'trc-client-core/src/report/GapReportGrid';
import GapReportTable from 'trc-client-core/src/report/GapReportTable';
import GapReportUser from 'trc-client-core/src/report/GapReportUser';
import Loader from 'trc-client-core/src/components/Loader';
import UserStore from 'trc-client-core/src/user/UserStore';


import {gapReportRequest} from 'trc-client-core/src/report/ReportActions';
import {settingsSetFullscreen} from 'trc-client-core/src/settings/SettingsActions';
import AutoRequest from 'trc-client-core/src/components/AutoRequest';

var GapReportChart = React.createClass({
    displayName: 'GapReportChart',

    render() {
        if (this.props.fetching) {
            return <Loader></Loader>;
        }

        if(!this.props.gapReport) {
            return null;
        }

        if(this.props.gapReport.get('pathwayCompletion').size < 1) {
            return <div className="InfoBox row3">No data to display.</div>
        }

        if (this.props.error) {
            return <ErrorMessage code={this.props.error.status}/>;
        }

        if(this.props.view === 'table') {
            return (
                <GapReportTable
                    pathwayId={this.props.learningPlanId}
                    data={this.props.gapReport.get('pathwayCompletion')}
                    filter={this.props.filter}
                    groupBy={this.props.sort}
                />
            );
        } else {
            return (
                <GapReportGrid
                    pathwayId={this.props.learningPlanId}
                    learningPlan={this.props.gapReport.get('learningPlan')}
                    data={this.props.gapReport.get('pathwayCompletion').toJS()}
                    filter={this.props.filter}
                    groupBy={this.props.sort}
                />
            );
        }

    }
});

const autoRequest = AutoRequest(['learningPlanId','dealerCode','region'], (props) => {
    if(props.view === 'table') {
        props.settingsSetFullscreen({
            pathname: props.location.pathname,
            value: true
        });
    }
    var query = {
        ...props.query,
        pathwayId: props.learningPlanId,
        dealerCode: props.dealerCode
    };

    if(query.dealerCode == 'ALL_DEALERS') {
        delete query.dealerCode;
    }

    // if dealer code AND region code not set, then set the region to the user's own region, or all regions for TMCA peeps
    if(!query.dealerCode && !query.region) {
        query = GapReportUser.merge(query);
    }

    props.gapReportRequest(query);
});

export default connect(
    (state, props) => {
        return {
            fetching:  state.gapReport.get('fetching'),
            error:  state.gapReport.get('error'),
            gapReport: state.gapReport.get(props.learningPlanId)
        }
    },
    {
        gapReportRequest,
        settingsSetFullscreen
    }
)(autoRequest(GapReportChart));