import React from 'react';
import { Col, Row, Badge } from 'react-bootstrap';
import { Card, ReactTable, WaitIcon, Profile } from '../../../components/index';
import { server } from '../../../commons/server';
import moment from 'moment';

/**
 * The page controller of the public module
 */
export default class OnlineUsers extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        this.refreshTable();
    }

    /**
     * Called when the report wants to update its content
     * @return {[type]} [description]
     */
    refreshTable() {
        const self = this;

        return server.post('/api/admin/rep/onlineusers').then(res => {
            // generate new result
            const result = { count: res.length, list: res };
            // set state
            self.setState({ values: result });
            // return to the promise
            return result;
        });
    }

    headerRender(count) {
        const countHTML = React.createElement(
            Badge,
            { className: 'tbl-counter' },
            count
        );

        // create the header of the card
        return React.createElement(
            Row,
            null,
            React.createElement(
                Col,
                { sm: 12 },
                React.createElement(
                    'h4',
                    null,
                    __('admin.websessions'),
                    ' ',
                    countHTML
                )
            )
        );
    }

    collapseRender(item) {
        return React.createElement(
            'div',
            { className: 'text-small' },
            React.createElement(
                'dl',
                null,
                React.createElement(
                    Col,
                    { sm: 4 },
                    React.createElement(
                        'dt',
                        null,
                        __('User.login') + ':'
                    ),
                    React.createElement(
                        'dd',
                        null,
                        item.userLogin
                    )
                ),
                React.createElement(
                    Col,
                    { sm: 4 },
                    React.createElement(
                        'dt',
                        null,
                        __('admin.websessions.lastrequest') + ':'
                    ),
                    React.createElement(
                        'dd',
                        null,
                        moment(item.lastAccess).format('L LT')
                    )
                ),
                React.createElement(
                    Col,
                    { sm: 4 },
                    React.createElement(
                        'dt',
                        null,
                        __('admin.websessions.sessiontime') + ':'
                    ),
                    React.createElement(
                        'dd',
                        null,
                        moment(item.loginDate).fromNow(true)
                    )
                )
            )
        );
    }

    render() {
        if (!this.state || !this.state.values) {
            return React.createElement(WaitIcon, { type: 'card' });
        }

        const colschema = [{
            title: __('User'),
            content: item => React.createElement(Profile, { size: 'small', title: item.userName, type: 'user' }),
            size: { sm: 4 }
        }, {
            title: __('UserLogin.loginDate'),
            content: item => moment(item.loginDate).format('L LT'),
            size: { sm: 4 }
        }, {
            title: __('admin.websessions.idletime'),
            content: item => moment(item.lastAccess).fromNow(true),
            size: { sm: 4 }
        }];

        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { header: this.headerRender(this.state.values.count) },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(ReactTable, { columns: colschema,
                            values: this.state.values.list,
                            onExpandRender: this.collapseRender })
                    )
                )
            )
        );
    }
}

OnlineUsers.propTypes = {
    route: React.PropTypes.object
};