import React from 'react';
import { Button } from 'react-bootstrap';
import { Card, Profile } from '../../components';

import { CrudController, CrudTable, CrudPagination, CrudForm, CrudMessage, CrudGrid } from '../packages/crud';

import { generateName, mockCrud } from '../mock-data';

// definition of the form fields to edit substances
const editorDef = {
    controls: [{
        property: 'name',
        required: true,
        type: 'string',
        max: 20,
        label: __('form.shortName'),
        size: { sm: 6 }
    }, {
        property: 'status',
        required: true,
        type: 'select',
        label: 'Status',
        options: 'substances',
        size: { sm: 3 }
    }, {
        property: 'quantity',
        type: 'number',
        label: 'Quantity',
        size: { sm: 3 }
    }],
    title: doc => doc && doc.id ? 'Editing record' : 'New record'
};

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

    constructor(props) {
        super(props);

        this.openNewForm = this.openNewForm.bind(this);

        this.state = {};
    }

    componentWillMount() {
        const crud = mockCrud();
        crud.on(this.crudEvent);

        const controller = new CrudController(crud, { pageSize: 20 });
        controller.initList();
        const controller2 = new CrudController(crud, { pageSize: 20 });
        controller2.initList();

        this.setState({ controller: controller, controller2: controller2 });
    }

    rowClick(item) {
        alert(item.name);
    }

    crudEvent(evt) {
        if (evt === 'query') {
            const lst = [];
            for (var i = 0; i < 20; i++) {
                const res = generateName();
                lst.push({
                    id: '12345-' + i,
                    name: res.name,
                    gender: res.gender,
                    status: 'Status of ' + res.name,
                    quantity: Math.random() * 1000 + 1000
                });
            }
            return { count: 843, list: lst };
        }

        if (evt === 'get-edit') {
            return {
                name: 'Teste',
                gender: 'MALE',
                status: 'test',
                quantity: 10
            };
        }
        return null;
    }

    expandRender(item) {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'dl',
                { className: 'dl-horizontal' },
                React.createElement(
                    'dt',
                    null,
                    'Patient: '
                ),
                React.createElement(
                    'dd',
                    null,
                    item.name
                ),
                React.createElement(
                    'dt',
                    null,
                    'Status: '
                ),
                React.createElement(
                    'dd',
                    null,
                    item.status
                ),
                React.createElement(
                    'dt',
                    null,
                    'Quantity: '
                ),
                React.createElement(
                    'dd',
                    null,
                    item.quantity.toLocaleString('en', { maximumFractionDigits: 2 })
                )
            )
        );
    }

    openNewForm() {
        this.state.controller.openForm();
    }

    gridCellRender(item) {
        return React.createElement(Profile, { size: 'small', title: item.name, type: 'user' });
    }

    render() {
        // the columns of the table
        const columns = [{
            title: 'Patient',
            content: item => React.createElement(Profile, { size: 'small', title: item.name, type: 'user' }),
            size: { sm: 6 }
        }, {
            title: 'Status (center alignment)',
            content: 'status',
            size: { sm: 3 },
            align: 'center'
        }, {
            title: 'Quantity',
            content: item => item.quantity.toLocaleString('en', { maximumFractionDigits: 2 }),
            size: { sm: 3 },
            align: 'right'
        }];

        const controller = this.state.controller;
        const ctrl2 = this.state.controller2;

        return React.createElement(
            'div',
            null,
            React.createElement(CrudForm, { controller: controller, schema: editorDef, openOnNew: true }),
            React.createElement(
                Card,
                { title: 'CRUD Table' },
                React.createElement(
                    Button,
                    { className: 'pull-right', onClick: this.openNewForm },
                    __('action.add')
                ),
                React.createElement(CrudMessage, { controller: controller }),
                React.createElement(CrudPagination, { controller: controller, showCounter: true }),
                React.createElement(CrudTable, { columns: columns,
                    editorSchema: editorDef,
                    controller: controller,
                    onExpandRender: this.expandRender }),
                React.createElement(CrudPagination, { controller: controller })
            ),
            React.createElement(
                Card,
                { title: 'CRUD grid' },
                React.createElement(CrudMessage, { controller: ctrl2 }),
                React.createElement(CrudPagination, { controller: ctrl2, showCounter: true }),
                React.createElement(CrudGrid, { controller: ctrl2,
                    onRender: this.gridCellRender,
                    onExpandRender: this.expandRender,
                    editorSchema: editorDef }),
                React.createElement(CrudPagination, { controller: ctrl2 })
            )
        );
    }
}