import React from 'react';
import { Tabs, Tab, Row, Col, Button, Badge, Alert } from 'react-bootstrap';
import { Card, ReactTable, WaitIcon, Profile } from '../../../components/index';
import DayPicker, { DateUtils } from 'react-day-picker';
import { server } from '../../../commons/server';
import Form from '../../../forms/form';
import moment from 'moment';

const fschema = {
    controls: [{
        property: 'iniDate',
        required: true,
        type: 'date',
        label: __('Period.iniDate'),
        size: { sm: 4 }
    }, {
        property: 'endDate',
        required: false,
        type: 'date',
        label: __('Period.endDate'),
        size: { sm: 4 }
    }, {
        property: 'userId',
        required: false,
        type: 'select',
        label: __('User'),
        options: 'users',
        size: { sm: 4 }
    }]
};

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

    constructor(props) {
        super(props);
        this.onDayClickCalendar = this.onDayClickCalendar.bind(this);
        this.refreshTableAllFilters = this.refreshTableAllFilters.bind(this);
        this.onChangeDoc = this.onChangeDoc.bind(this);

        this.state = { iniDate: new Date(), doc: {} };
    }

    componentWillMount() {
        this.refreshTableByDay(this.state.iniDate);
    }

    onChangeDoc() {
        this.forceUpdate();
    }

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

        const query = {
            iniDate: day.getTime()
        };

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

    refreshTableAllFilters() {
        const self = this;

        const errors = this.refs.form.validate();
        this.setState({ errors: errors });
        if (errors) {
            return;
        }

        const query = {
            iniDate: this.state.doc.iniDate,
            endDate: this.state.doc.endDate,
            userId: this.state.doc.userId
        };

        server.post('/api/admin/rep/usersession', query).then(res => {
            // generate new result
            const result = { count: res.count, list: res.list };
            // set state
            self.setState({ values: result });
        });
    }

    onDayClickCalendar(e, day) {
        this.refreshTableByDay(day);
    }

    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,
                { md: 12 },
                React.createElement(
                    'h4',
                    null,
                    __('admin.reports.usersession'),
                    ' ',
                    count === 0 ? '' : countHTML
                )
            )
        );
    }

    tableRender() {
        if (!this.state.values || !this.state.values.list || this.state.values.list.length < 1) {
            return React.createElement(
                Alert,
                { className: 'mtop', bsStyle: 'warning' },
                __('form.norecordfound')
            );
        }

        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.sessiontime'),
            content: item => item.logoutDate ? moment(item.loginDate).from(moment(item.logoutDate), true) : moment(item.loginDate).fromNow(true),
            size: { sm: 4 }
        }];

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

    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,
                        __('UserLogin.logoutDate') + ':'
                    ),
                    React.createElement(
                        'dd',
                        null,
                        item.logoutDate ? moment(item.logoutDate).format('L LT') : __('admin.reports.usersession.online')
                    )
                ),
                React.createElement(
                    Col,
                    { sm: 4 },
                    React.createElement(
                        'dt',
                        null,
                        __('UserLogin.ipAddress') + ':'
                    ),
                    React.createElement(
                        'dd',
                        null,
                        item.ipAddress
                    )
                )
            ),
            React.createElement(
                Col,
                { md: 12, className: 'text-small' },
                item.Application
            )
        );
    }

    render() {
        const selday = this.state.iniDate;
        const modifiers = {
            selected: day => selday ? DateUtils.isSameDay(day, selday) : false
        };

        return React.createElement(
            Card,
            { header: this.headerRender(!this.state || !this.state.values ? 0 : this.state.values.count) },
            React.createElement(
                Tabs,
                { defaultActiveKey: 1, className: 'mtop', animation: false },
                React.createElement(
                    Tab,
                    { eventKey: 1, title: __('datetime.date'), className: 'mtop' },
                    React.createElement(
                        'div',
                        null,
                        React.createElement(
                            Row,
                            null,
                            React.createElement(Col, { md: 4 }),
                            React.createElement(
                                Col,
                                { md: 4 },
                                React.createElement(
                                    'div',
                                    null,
                                    React.createElement(DayPicker, { modifiers: modifiers, onDayClick: this.onDayClickCalendar })
                                )
                            ),
                            React.createElement(Col, { md: 4 })
                        )
                    )
                ),
                React.createElement(
                    Tab,
                    { eventKey: 2, title: __('form.otherfilters'), className: 'mtop' },
                    React.createElement(
                        Row,
                        null,
                        React.createElement(
                            Col,
                            { md: 12 },
                            React.createElement(Form, { ref: 'form',
                                schema: fschema,
                                doc: this.state.doc,
                                onChange: this.onChangeDoc,
                                errors: this.state.errors })
                        ),
                        React.createElement(
                            Col,
                            { md: 12 },
                            React.createElement(
                                Button,
                                { onClick: this.refreshTableAllFilters, bsStyle: 'primary' },
                                'Update'
                            )
                        )
                    )
                )
            ),
            !this.state || !this.state.values ? React.createElement(WaitIcon, { type: 'card' }) : this.tableRender()
        );
    }
}

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