/*eslint-disable no-unused-vars*/
import React from 'react';
import {Link} from 'react-router';
import Reflux from 'reflux';
import StoreMixin from 'reflux-immutable/StoreMixin';
import { Map, fromJS } from 'immutable';

// Commponents
import Grid from 'trc-client-core/src/components/Grid';
import Page from 'trc-client-core/src/components/Page';
import Input from 'bd-stampy/components/InputElement';
import Col from 'trc-client-core/src/components/Col';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import DataTable from 'bd-stampy/components/DataTable';

// Data
import UserStore from '../user/UserStore';
import {getCompletionData} from 'trc-client-core/src/admin/AdminActions';
import ParticipantActions from 'trc-client-core/src/participant/ParticipantActions';
import ParticipantStore from 'trc-client-core/src/participant/ParticipantStore';
import adminQuickUsersModel from './models/AdminQuickUsersModel';
import Auth from 'trc-client-core/src/components/Auth';

var AdminQuickLinks = React.createClass({
    displayName: 'AdminQuickLinks',
    mixins: [
        require('bd-stampy/mixins/FormMixin'),
        Reflux.listenTo(ParticipantStore, 'onStoreChange'),
        StoreMixin
    ],
    getStoreState() {
        return {
            searchResults: ParticipantStore.get('searchResults')
        };
    },
    getInitialState: function () {
        return {
            users: undefined,
            completionDataIcon: 58212
        };
    },
    onSearchUsers: function(e) {
        e.preventDefault();
        ParticipantActions.search(this.state.formData);
    },
    onDownloadCompletionData: function () {
        this.setState({completionDataIcon: 57863});
        getCompletionData();
    },
    render: function() {
        return (
            <Page title="Admin Quick Links">
                <div>
                    <form onSubmit={this.onSearchUsers}>
                        <h2 className="hug-top">Search For a User</h2>
                        <Input
                            name="name"
                            className="float-left w70"
                            onChange={this.FormMixin_onFormChange}
                            placeholder="Search Users"
                        />
                        <button className="Button w30">Search</button>
                        {this.renderUserSearchResultsTable()}
                    </form>


                    <h2>Switch User by Department and Role</h2>

                    {this.renderPeopleButtons()}

                    <h3>Tools</h3>
                    <ul className="IconList IconList-child ColumnList">
                        <IconListItem icon={String.fromCharCode(57476)} to="/admin/switch-user">Switch User</IconListItem>
                        <IconListItem icon={String.fromCharCode(58212)} to="/admin/export/registration">Download Registration Data</IconListItem>
                        <li><a data-icon={String.fromCharCode(this.state.completionDataIcon)} onClick={this.onDownloadCompletionData}>Download Completion Data</a></li>
                        <IconListItem icon={String.fromCharCode(58213)} href="/admin/upload/stage">Upload & Update Data</IconListItem>
                        <IconListItem icon={String.fromCharCode(57621)} href="/admin/workflow/result">Upload Results Log</IconListItem>
                        <Auth is="ROLE_MEGA_ADMIN">
                            <IconListItem icon={String.fromCharCode(57968)} href="/admin/survey_monkey/add_api_credentials">Associate Survey Monkey</IconListItem>
                        </Auth>
                    </ul>

                    <h3>Technical</h3>
                    <ul className="IconList IconList-child ColumnList">
                        <IconListItem icon={"\uE051"} to="/technical/certified-staff">Certified Staff</IconListItem>
                        <IconListItem icon={"\uE051"} to="/portal/gapreport/technical_career_plan">Technical Gap Report</IconListItem>
                        <li><a data-icon={"\uE037"} download="denied_technical_advisors.csv" href="/superadmin/required_role_denied">Denied Technical Advisors</a></li>
                        <IconListItem icon={"\uE051"} to="/report/technical-training-requests">Technical Training Requests</IconListItem>
                    </ul>

                    <h3>Other Links</h3>
                    <ul className="IconList IconList-child ColumnList">
                        <IconListItem icon={"\uE051"} to="/management/fdlp">FDLP</IconListItem>
                        <IconListItem icon={"\uE051"} to="/course">Course Administration</IconListItem>
                        <IconListItem icon={"\uE051"} to="/admin/learning-plans">Learning Plan Editor</IconListItem>
                        <IconListItem icon={"\uE051"} to="/admin/site/info">Site Information</IconListItem>
                    </ul>

                    <h3>Qanda</h3>
                    <ul className="IconList IconList-child IconList-product ColumnList">
                        <IconListItem icon={"\uE051"} to="/product/qanda">Home</IconListItem>
                        <IconListItem icon={"\uE051"} to="/product/qanda/edit">Edit</IconListItem>
                        <IconListItem icon={"\uE051"} to="/product/qanda/new_question">New Question</IconListItem>
                    </ul>
                </div>
            </Page>
        );
    },

    renderPeopleButtons() {
        const label = (text) => text.split('_').join(' ');

        const tableContent = fromJS(adminQuickUsersModel[UserStore.get('site')])
            .map((roles, group) => {
                var rows = roles.map((users, role) => {
                    const cells = users.map((id, user) => {
                        const roleClass = "Button-"+role.replace('Body_and_Paint','body_paint').toLowerCase();
                        return (
                            <td key={id} className="w20">
                                <a className={`Button-admin w100 ${roleClass}`} href={`/admin/tmca/switch-user?j_username=${id}`}>
                                    {user}
                                </a>
                            </td>
                        );
                    });

                    return (
                        <tr key={role}>
                            <th>{label(role)}</th>
                            {cells}
                        </tr>
                    );
                });

                return (
                    <tbody>
                        <tr>
                            <td colSpan="2">
                                <h3>{label(group)}</h3>
                            </td>
                        </tr>
                        {rows}
                    </tbody>
                );
            });

        return (
            <table className="Table Table-tight w100">
                {tableContent}
            </table>
        );
    },

    renderUserSearchResultsTable() {
        if(!this.state.searchResults) {
            return null;
        }

        var tableSchema = [{
            heading: 'Name',
            filter: (user) => user.firstName + user.lastName,
            render: (user) => <a className="link" href={`/admin/tmca/switch-user?j_username=${user.participantId}`}>{user.firstName + ' ' + user.lastName}</a>
        }, {
            heading: 'Job',
            filter: 'jobPositionDesc'
        }, {
            heading: 'Region',
            filter: 'regionCode'
        }, {
            heading: 'Department',
            filter: 'department'
        }, {
            heading: 'Dealership',
            filter: 'dealerName'
        }];

        return <DataTable
            schema={tableSchema}
            data={this.state.searchResults.toJS()}
            modifier="data"
        />;
    }
});

module.exports = AdminQuickLinks;