import React from 'react';
import { Row, Col, Button, Badge, Alert } from 'react-bootstrap';
import { Card, WaitIcon, ReactTable } from '../../../components/index';
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: { md: 4 },
        defaultValue: new Date()
    }, {
        property: 'endDate',
        required: false,
        type: 'date',
        label: __('Period.endDate'),
        size: { md: 4 }
    }, {
        property: 'searchKey',
        required: false,
        type: 'string',
        max: 50,
        label: __('form.searchkey'),
        size: { sm: 4 }
    }]
};

const detailSchema = {
    controls: [{
        property: 'userName',
        type: 'string',
        label: 'User Name',
        size: { sm: 4 }
    }, {
        property: 'workspace',
        type: 'string',
        label: 'Workspace',
        size: { sm: 4 }
    }, {
        property: 'exceptionMessage',
        type: 'string',
        label: 'Exception Message',
        size: { sm: 4 }
    }, {
        property: 'request',
        type: 'string',
        label: 'Request',
        size: { sm: 12 }
    }, {
        property: 'stackTrace',
        type: 'string',
        label: 'Stack Trace',
        size: { sm: 12 }
    }]
};

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

    constructor(props) {
        super(props);

        this.refresh = this.refresh.bind(this);
        this.state = { doc: {} };
    }

    componentWillMount() {
        this.refreshTodayRep();
    }

    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,
            searchKey: this.state.doc.searchKey
        };

        server.post('/api/admin/rep/errorlog', 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/todayerrorlog').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,
                    __('Permission.ERRORLOGREP'),
                    ' ',
                    count === 0 ? '' : countHTML
                )
            )
        );
    }

    collapseRender(item) {
        return React.createElement(
            Row,
            null,
            React.createElement(
                'div',
                { className: 'margin-2x' },
                React.createElement(Form, { schema: detailSchema, doc: item, readOnly: true })
            )
        );
    }

    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: __('datetime.date'),
            content: item => moment(item.errorDate).format('L LTS'),
            size: { md: 4 }
        }, {
            title: 'Exception Class',
            content: 'exceptionClass',
            size: { md: 4 }
        }, {
            title: 'URL',
            content: 'url',
            size: { md: 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()
            )
        );
    }
}

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