import React from 'react';
import {Link} from 'react-router';
import UserStore from 'trc-client-core/src/user/UserStore';
import IconList from 'trc-client-core/src/components/IconList';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import LearningPlanListCurrentParticipant from 'trc-client-core/src/learningPlan/LearningPlanListCurrentParticipant';

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

var PortalNavigation = React.createClass({
    displayName: 'PortalNavigation',
    render: function () {
        var beta = <span className="Button Button-small vertical-middle l-inline">Beta</span>;

        return (
            <div className="hide-print">
                <h1>{UserStore.get('site') === 'TOYOTA' ? 'My TIA' : 'My Academy'}</h1>
                <IconList>
                    <li><Link to="/portal" data-icon={"\uE332"}>My Dashboard</Link></li>
                </IconList>

                <IconList modifier="child">
                    <li className="IconList_label">My Learning Plans</li>
                    <LearningPlanListCurrentParticipant participantId={UserStore.get('participantId')} />
                </IconList>
                <Auth is="ROLE_MANAGER" component="div">
                    <Auth isntPermission="TMCA_STAFF">
                        <h3>Tools & Reporting</h3>
                        <ul className="IconList IconList-grandchild">
                            <Auth is="ROLE_MANAGER" isnt="ROLE_TMCA_INTERNAL" component="li">
                                <ul>
                                    <IconListItem icon={"\uE056"} to="/portal/training_activity_summary"> Training Activity Summary</IconListItem>
                                    <IconListItem icon={"\uE056"} to="/portal/dealership">Dealership Details</IconListItem>
                                    <IconListItem icon={"\uE056"} to="/portal/dealership/required_roles">Required Roles</IconListItem>
                                </ul>
                            </Auth>
                            <Auth perm="TECHNICAL_TRAINING_REQUESTS">
                                <IconListItem className={"IconList-technical"} icon={"\uE056"} to="/report/technical-training-requests">Tech Training Requests</IconListItem>
                            </Auth>
                            <Auth perm="SWITCH_USER">
                                <IconListItem className={"IconList"} icon={"\uE110"} to="/admin/switch-user">Switch User</IconListItem>
                            </Auth>
                            <Auth is="ROLE_BODY_PAINT_ADMIN" component="li">
                                <ul>
                                    <IconListItem icon={"\uE055"} to="/portal/body_and_paint_national_staff_list">B&P National Staff List</IconListItem>
                                    <IconListItem icon={"\uE055"} to="/portal/certified_staff">B&P Certified Staff</IconListItem>
                                </ul>
                            </Auth>
                        </ul>

                        {this.renderGapReports()}

                        <Auth is="ROLE_TMCA_ADMIN" component="div">
                            <h3 className="IconList_label">TRC Reports</h3>
                            <ul className="IconList IconList-grandchild">
                                <IconListItem icon={"\ue018"} to="/portal/over_enrolled_courses">Over Enrolled Courses</IconListItem>
                                <IconListItem icon={"\ue056"} to="/report/survey-notification-list">Survey Notification List</IconListItem>
                            </ul>
                        </Auth>

                        <Auth isAny={['ROLE_TMCA_ADMIN', 'ROLE_TECH_ADMIN']} component="div">
                            <h3 className="IconList_label">Tech Reports</h3>
                            <ul className="IconList IconList-grandchild">
                                {/*
                                    FIXME: Hiding reports while we figuire out if they are going to be fixed or not
                                    <IconListItem icon={"\ue083"} href="/#/report/incomplete_prerequisites">Incomplete Prereq {beta}</IconListItem>
                                    <IconListItem icon={"\ue083"} href="/#/report/incomplete_pt_prerequisites">Incomplete PT Prereq {beta}</IconListItem>
                                    <IconListItem icon={"\ue018"} href="/#/report/training_delivery">Tech Training Delivery {beta}</IconListItem>
                                    <IconListItem icon={"\ue018"} href="/#/report/class_sizes">Class Sizes {beta}</IconListItem>
                                    <IconListItem icon={"\ue018"} href="/#/report/stream_certification">Stream Certification {beta}</IconListItem>
                                    <IconListItem icon={"\ue018"} href="/#/report/stream_eligibility">Stream Eligibility {beta}</IconListItem>
                                    <Auth isPermission="SERVICE_EXCELLENCE_REPORT">
                                        <IconListItem icon={"\ue018"} href="/#/report/service-excellence">Service Excellence {beta}</IconListItem>
                                    </Auth>
                                */}
                                <Auth is="ROLE_TMCA_ADMIN" component="li">
                                    <ul>
                                        {/*
                                            FIXME: Same as above
                                            <IconListItem icon={"\ue018"} href="/#/report/dmt_overview">DMT Overview {beta}</IconListItem>
                                        */}
                                        <IconListItem icon={"\ue022"} href="/superadmin/required_role_denied" download="denied_technical_advisors.csv">Denied Technical Advisors</IconListItem>
                                    </ul>
                                </Auth>
                            </ul>

                            <h3 className="IconList_label">Required Roles</h3>
                            <ul className={"IconList IconList-grandchild"} >
                                <IconListItem icon={"\uE056"} to="/portal/required-roles/report">RR Report</IconListItem>
                                <IconListItem icon={"\uE056"} to="/portal/required-roles/qareport">QA Report</IconListItem>
                                <IconListItem icon={"\u270F"} to="/portal/required-roles">RR Admin</IconListItem>
                            </ul>
                        </Auth>
                    </Auth>
                </Auth>
                <Auth isntPermission="TMCA_STAFF">
                    {this.renderNetworkCentralUserGuide()}
                </Auth>
            </div>
        );
    },
    renderGapReports: function () {
        var pdfGapReports;

        // NOTE: This often gets toggled on request by TIA
        // if(!Permissions.get('TMCA_ADMIN_AND_STAFF')) {
        //     var gapReportCodes = ["SA", "PA", "SE"];
        //     pdfGapReports = ["sales", "parts", "service"].map((department, key) => {
        //         return (
        //             <IconListItem
        //                 key={key}
        //                 icon={"\uE022"}
        //                 href={`//static.toyotainstituteaustralia.com.au/docs/gap_reports/${UserStore.get('organisationCode')}-${gapReportCodes[key]}.pdf`}
        //                 className="t-capitalize"
        //                 children={department} />
        //         );
        //     });
        // }

        return (
            <div>
                <h3 className="IconList_label">Gap Reports</h3>
                <ul className={"IconList IconList-grandchild"}>
                    <li>
                        <Link to={`/portal/gapreport/toyota-for-life`} data-icon={"\uE083"}>
                            <span> Toyota For Life</span>
                        </Link>
                    </li>
                    <Auth isPermission="GAPREPORT_WARRANTY" component="div">
                        <li><Link to={`/portal/gapreport/warranty_admin_plan`} data-icon={"\uE083"}>Warranty</Link></li>
                    </Auth>
                    <Auth isPermission="GAPREPORT_TECHNICAL">
                        <li><Link to={`/gapreport/technical_overview`} data-icon={"\uE083"}>Technical</Link></li>
                    </Auth>
                    {pdfGapReports}
                </ul>
            </div>
        );
    },
    renderNetworkCentralUserGuide: function () {
        var regionCode = ["NRO", "ERO", "CRO", "SRO", "WA"];
        var regions = ["northern", "eastern", "central", "southern", "twa"];
        var items = regionCode.map((code, key) => {
            return (
                <IconListItem
                    key={key}
                    icon={"\ue144"}
                    href={`https://source.toyota.com.au/dc/${regions[key]}/Admin/Pages/Network-Central-Guide.aspx`}>
                    {code}
                </IconListItem>
            );
        });
        return (
            <div>
                <h3 className="IconList_label">Network Central User Guides</h3>
                <ul className="IconList IconList-grandchild">{items}</ul>
            </div>
        );
    }
});

module.exports = PortalNavigation;