import React from 'react';
import { Row, Col, Button, Badge, Alert } from 'react-bootstrap';
import { Card, WaitIcon, ReactTable, Profile, Fa } from '../../../components/index';
import { server } from '../../../commons/server';
import Form from '../../../forms/form';
import moment from 'moment';
import CommandTypeControl from './command-type-control';

const fschema = {
    controls: [{
        property: 'iniDate',
        required: true,
        type: 'date',
        label: __('Period.iniDate'),
        size: { md: 6 },
        defaultValue: new Date()
    }, {
        property: 'endDate',
        required: false,
        type: 'date',
        label: __('Period.endDate'),
        size: { md: 6 }
    }, {
        property: 'userId',
        required: false,
        type: 'select',
        label: __('User'),
        options: 'users',
        size: { md: 6, newLine: true }
    }, {
        property: 'type',
        required: false,
        type: CommandTypeControl,
        max: 50,
        label: __('admin.reports.cmdhistory.cmdevent'),
        size: { sm: 6 }
    }, {
        property: 'adminUnitId',
        type: 'adminUnit',
        label: __('AdministrativeUnit'),
        size: { md: 6, newLine: true }
    }, {
        property: 'searchKey',
        required: false,
        type: 'string',
        max: 50,
        label: __('form.searchkey'),
        size: { sm: 6 }
    }]
};

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

    constructor(props) {
        super(props);
        this.refresh = this.refresh.bind(this);
        this.onChangeDoc = this.onChangeDoc.bind(this);
        this.state = { doc: {} };
    }

    componentWillMount() {
        this.refreshTodayRep();
    }

    onChangeDoc() {
        this.forceUpdate();
    }

    refresh() {
        const self = this;

        const errors = self.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,
            type: this.state.doc.type,
            adminUnitId: this.state.doc.adminUnitId,
            searchKey: this.state.doc.searchKey
        };

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

    refreshTodayRep() {
        const self = this;
        server.post('/api/admin/rep/todaycmdhistory').then(res => {
            // generate new result
            const result = { count: res.count, list: res.list };
            // set state
            self.setState({ values: 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,
                { md: 12 },
                React.createElement(
                    'h4',
                    null,
                    'Command History',
                    ' ',
                    count === 0 ? '' : countHTML
                )
            )
        );
    }

    collapseRender(item) {

        const text = item.detail.text ? React.createElement(
            Col,
            { sm: 12 },
            React.createElement(
                'dl',
                { className: 'dl-horizontal text-muted' },
                React.createElement(
                    'dt',
                    null,
                    __('global.comments'),
                    React.createElement(Fa, { icon: 'comment-o' }),
                    ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    item.detail.text
                )
            )
        ) : null;

        var vals = null;
        if (item.detail.items || item.detail.diffs) {
            vals = React.createElement(
                Col,
                { sm: 12 },
                React.createElement(
                    'dl',
                    { className: 'dl-horizontal text-muted' },
                    item.detail.diffs && item.detail.diffs.map(diff => React.createElement(
                        'div',
                        null,
                        React.createElement(
                            'dt',
                            null,
                            diff.title,
                            React.createElement(Fa, { icon: 'pencil-square-o' }),
                            ':'
                        ),
                        React.createElement(
                            'dd',
                            null,
                            diff.prevValue ? diff.prevValue : __('global.notdef'),
                            React.createElement(Fa, { icon: 'caret-right' }),
                            diff.newValue ? diff.newValue : __('global.notdef')
                        )
                    )),
                    item.detail.items && item.detail.items.map(i => React.createElement(
                        'div',
                        null,
                        React.createElement(
                            'dt',
                            null,
                            i.title.substr(0, 1) === '-' || i.title.substr(0, 1) === '+' ? i.title.substr(1, i.length) : i.title,
                            i.title.substr(0, 1) === '+' ? React.createElement(Fa, { icon: 'plus-square-o' }) : null,
                            i.title.substr(0, 1) === '-' ? React.createElement(Fa, { icon: 'minus-square-o' }) : null,
                            ':'
                        ),
                        React.createElement(
                            'dd',
                            null,
                            i.value
                        )
                    ))
                )
            );
        }

        return React.createElement(
            Row,
            null,
            React.createElement(
                'div',
                { className: 'margin-2x' },
                text,
                ' ',
                vals
            )
        );
    }

    profileSubtitleRender(item) {
        return React.createElement(
            'div',
            null,
            item.unitName,
            ' ',
            React.createElement('br', null),
            ' ',
            item.adminUnitName,
            ' '
        );
    }

    renderTableResult() {
        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 tschema = [{
            title: __('User'),
            content: item => React.createElement(Profile, { size: 'small', title: item.userName, type: 'user', subtitle: this.profileSubtitleRender(item) }),
            size: { sm: 3 }
        }, {
            title: __('datetime.date'),
            content: item => moment(item.execDate).format('L LTS'),
            size: { sm: 3 }
        }, {
            title: __('admin.reports.cmdhistory.cmdevent'),
            content: 'type',
            size: { sm: 2 }
        }, {
            title: 'Entity Name',
            content: 'entityName',
            size: { sm: 4 }
        }];

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

    render() {
        const header = this.headerRender(!this.state || !this.state.values ? 0 : this.state.values.count);

        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { header: header },
                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.refresh, bsStyle: 'primary' },
                            'Update'
                        )
                    )
                ),
                !this.state || !this.state.values ? React.createElement(WaitIcon, { type: 'card' }) : this.renderTableResult()
            )
        );
    }
}

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