import React from 'react';
import Reflux from 'reflux';
import Loader from 'trc-client-core/src/components/Loader';
import RequiredRoleDetail from 'trc-client-core/src/requiredRoles/RequiredRoleDetail';
import RequiredRolesActions from 'trc-client-core/src/requiredRoles/RequiredRolesActions';
import RequiredRolesStore from 'trc-client-core/src/requiredRoles/RequiredRolesStore';

var RequiredRolesPortalView = React.createClass({
    displayName: 'RequiredRolesPortalView',
    mixins:[
        Reflux.listenTo(RequiredRolesStore, 'onStoreChange'),
        require('reflux-immutable/StoreMixin')
    ],
    getStoreState() {
        return {
            dealershipRoles: RequiredRolesStore.get('dealershipRoles')
        };
    },
    componentDidMount: function () {
        RequiredRolesActions.fetchDealershipRoles();
    }, 
    onStoreUpdate() {
        this.setState(this.getStoreState());
    },
    render: function () {
        if(!this.state.dealershipRoles){
            return <Loader></Loader>;
        }
        return (
            <div>
                <h1>Required Roles</h1>
                <p><em>Below you will find a list of all the Required Roles in your dealership. It is vital that your dealership has a staff member nominated for all of these roles.</em></p>
                {this.renderRequiredRoles()}   
            </div>
        );
    }, 
    renderRequiredRoles(){
        var dealershipRoles = this.state.dealershipRoles;
        var singleRole = true;

        if(!dealershipRoles){
            return <Loader></Loader>;
        }

        if(dealershipRoles.size > 1){
            singleRole = false;
        }

        if(dealershipRoles.size === 0){
            return <em className="InfoBox">There are no Required Roles currently applicable to your Department.</em>;
        }

        return dealershipRoles.toJS().map((item, key) => <RequiredRoleDetail key={key} item={item} singleRole={singleRole} />);
    }

});

module.exports = RequiredRolesPortalView;