import React from 'react';
import { Row, Col } from 'react-bootstrap';
import { Card, ReactTable, ReactGrid, Profile } from '../../components/index';

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

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

    constructor(props) {
        super(props);

        this.gridCellRender = this.gridCellRender.bind(this);

        this.state = {};
    }

    componentWillMount() {
        const lst = [];
        for (var i = 0; i < 15; i++) {
            const res = generateName();
            lst.push({
                name: res.name,
                gender: res.gender,
                status: 'Status of ' + res.name,
                quantity: Math.random() * 1000 + 1000
            });
        }
        this.setState({ values: lst });
    }

    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 })
                )
            )
        );
    }

    toggleSize(cell) {
        return () => {
            if (cell.getSize()) {
                cell.setSize(null);
            } else {
                cell.setSize({ sm: 12 });
            }
        };
    }

    gridCellRender(item, cell) {
        return React.createElement(
            'div',
            null,
            React.createElement(Profile, { size: 'small', title: item.name, type: 'user' }),
            React.createElement(
                'a',
                { onClick: this.toggleSize(cell) },
                'Click me'
            )
        );
    }

    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'
        }];

        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { title: 'Reactive table' },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(ReactTable, { columns: columns,
                            values: this.state.values,
                            onExpandRender: this.expandRender })
                    )
                )
            ),
            React.createElement(
                Card,
                { title: 'Reactive grid' },
                React.createElement(ReactGrid, { values: this.state.values,
                    onCollapseRender: this.gridCellRender,
                    onExpandRender: this.expandRender })
            )
        );
    }
}