import React from 'react';
import { Row, Col, Button } from 'react-bootstrap';
import { Card, Profile } from '../../components/index';
import Form from '../../forms/form';
import moment from 'moment';

/**
 * Initial page that declare all routes of the module
 */
export default class TableFormExample extends React.Component {

    constructor(props) {
        super(props);

        this.state = { doc: {} };
        this.validate = this.validate.bind(this);
        this.clearIt = this.clearIt.bind(this);
        this.onChangeDoc = this.onChangeDoc.bind(this);
    }

    validate() {
        const self = this;

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

        alert('form is valid');
    }

    clearIt() {
        this.setState({ doc: {} });
        this.forceUpdate();
    }

    onChangeDoc(doc) {
        this.forceUpdate();
        // display object in the console
        console.log(doc);
    }

    render() {

        // the columns of the table
        const readOnlyColumns = [{
            title: 'iniDate',
            content: item => React.createElement(
                'span',
                null,
                moment(item.iniDate).format('L LT')
            ),
            size: { sm: 6 }
        }, {
            title: 'userName',
            content: item => React.createElement(Profile, { size: 'small', title: item.userName, type: 'user' }),
            size: { sm: 6 }
        }];

        // The schema of table form
        const tfschema = {
            controls: [{
                property: 'iniDate',
                required: true,
                type: 'date',
                label: __('Period.iniDate'),
                size: { md: 4 }
            }, {
                property: 'userName',
                required: false,
                type: 'string',
                label: __('User'),
                size: { md: 4 }
            }]
        };

        // the form schema
        const fschema = {
            defaultProperties: {
                type: 'Type test default prop',
                formList: [{ iniDate: new Date(), userName: 'Mauricio' }, { iniDate: new Date(), userName: 'Jesus' }, { iniDate: new Date(), userName: 'Santos' }]
            },
            controls: [{
                property: 'type',
                required: false,
                type: 'string',
                max: 50,
                label: __('admin.reports.cmdhistory.cmdevent'),
                size: { sm: 6 }
            }, {
                property: 'formList',
                type: 'tableForm',
                fschema: tfschema,
                readOnlyColumns: readOnlyColumns,
                min: 2,
                max: 5,
                size: { sm: 12 }
            }]
        };

        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { title: 'Form Table' },
                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, readOnly: true })
                    )
                )
            ),
            React.createElement(
                Card,
                { title: 'Form Table' },
                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(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(
                            Button,
                            { onClick: this.validate, bsStyle: 'primary' },
                            'Validate'
                        )
                    )
                )
            ),
            React.createElement(
                Card,
                { title: 'Document' },
                React.createElement(
                    'div',
                    null,
                    JSON.stringify(this.state.doc, null, '    ')
                ),
                React.createElement(
                    Button,
                    { onClick: this.clearIt },
                    'Clear it'
                )
            ),
            this.state.errors ? React.createElement(
                Card,
                { title: 'Errors' },
                JSON.stringify(this.state.errors, null, '    ')
            ) : null
        );
    }
}