import React from 'react';
import {connect} from 'react-redux';
import {Link, IndexLink} from 'react-router';

import Tab from 'bd-stampy/components/Tab';
import TabView from 'bd-stampy/components/TabView';
import TabContent from 'bd-stampy/components/TabContent';

import UserStore from 'trc-client-core/src/user/UserStore';
import ErrorMessage from 'trc-client-core/src/components/ErrorMessage';
import PortalDashboardView from 'trc-client-core/src/portal/PortalDashboardView';
import PortalProfileView from 'trc-client-core/src/portal/PortalProfileView';
import PortalTrainingHistory from 'trc-client-core/src/portal/PortalTrainingHistory';
import AdminQuickLinks from 'trc-client-core/src/admin/AdminQuickLinks';

import {participantDashboardRequest} from 'trc-client-core/src/participant/ParticipantActions';

import Permissions from 'trc-client-core/src/user/Permissions';

var PortalView = React.createClass({
    displayName: 'PortalView',
    componentDidMount() {
        this.getData(this.props);
    },
    componentWillReceiveProps(nextProps) {
        if (
            this.props.params.participantId !== nextProps.params.participantId
        ) {
            this.getData(nextProps);
        }  
    },
    getData(props) {
        if (Permissions.get('ADMIN_AREA')) {
            return;
        }
        var participantId =  props.params.participantId || UserStore.get('participantId')
        this.props.dispatch(participantDashboardRequest({
            participantId: participantId
        }));
    },
    render() {
        if(Permissions.get('ADMIN_AREA')) {
            return <AdminQuickLinks/>;
        } else {
            return this.renderDashboard();
        }
    },
    renderDashboard: function () {
        var {participantId} = this.props.params;

        if(this.props.error) {
            return <ErrorMessage message="This user does not exist"/>
        }

        return (
            <div>
                <h1>Dashboard <span className="t-muted">{this.props.participant.get('firstName')} {this.props.participant.get('lastName')}</span></h1>
                <div className="TabGroup">
                    <IndexLink className="TabItem" activeClassName="is-active" to={`/portal/${participantId}`}>Training Activity</IndexLink>
                    <Link className="TabItem" activeClassName="is-active" to={`/portal/${participantId}/profile`}>Profile</Link>
                    <Link className="TabItem" activeClassName="is-active" to={`/portal/${participantId}/training-history`}>Training History</Link>
                </div>
                {this.props.children}
            </div>
        );
    }
});

module.exports = connect(state => ({
    participant: state.participant.get('dashboard'),
    error: state.participant.get('error')
}))(PortalView);