import React from 'react';
import { Row, Col } from 'react-bootstrap';
import { Card } from '../../../components';
import { hasPerm } from '../../session';
import CrudMessage from './crud-message';
import CrudPagination from './crud-pagination';
import CrudGrid from './crud-grid';
import CrudController from './crud-controller';
import CrudForm from './crud-form';
import CrudCounter from './crud-counter';
import CrudAddButton from './crud-add-button';

/**
 * Aggregate all crud component offering a full stack crud editor
 */
export default class CrudView extends React.Component {

    constructor(props) {
        super(props);
        this.openNewForm = this.openNewForm.bind(this);
    }

    componentWillMount() {
        // the controller options
        const opts = {
            pageSize: this.props.pageSize,
            readOnly: !hasPerm(this.props.perm),
            editorSchema: this.props.editorSchema,
            refreshAll: !!this.props.refreshAll,
            remoteForm: this.props.remoteForm
        };

        const controller = new CrudController(this.props.crud, opts);
        controller.initList(this.props.queryFilters);

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

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

    headerRender() {
        const controller = this.state.controller;
        let size = 12;

        let btn;
        if (!controller.isReadOnly()) {
            btn = React.createElement(CrudAddButton, { controller: controller });
            size = 10;
        } else {
            btn = null;
        }

        return React.createElement(
            Row,
            null,
            React.createElement(
                Col,
                { sm: size },
                React.createElement(
                    'h5',
                    { className: 'pull-left' },
                    this.props.title
                ),
                controller.getCount() > 0 && React.createElement(
                    'div',
                    { className: 'pull-left' },
                    React.createElement(CrudCounter, { controller: controller, counterOnly: true })
                )
            ),
            btn && React.createElement(
                Col,
                { sm: 2 },
                React.createElement(
                    'div',
                    { className: 'pull-right' },
                    btn
                )
            )
        );
    }

    render() {
        const controller = this.state.controller;

        return React.createElement(
            'div',
            null,
            React.createElement(CrudForm, { controller: controller,
                openOnNew: true,
                wrapType: this.props.modal ? 'modal' : 'card' }),
            React.createElement(
                Card,
                { header: this.headerRender(), padding: this.props.combine ? 'combine' : 'default' },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12 },
                        React.createElement(
                            'div',
                            null,
                            React.createElement(CrudMessage, { controller: controller }),
                            this.props.pageSize && React.createElement(
                                'span',
                                null,
                                React.createElement(CrudCounter, { controller: controller, className: 'pull-right' }),
                                React.createElement(CrudPagination, { controller: controller })
                            ),
                            React.createElement(CrudGrid, { controller: controller,
                                cellSize: this.props.cellSize,
                                options: this.props.options,
                                onRender: this.props.onCellRender,
                                onExpandRender: this.props.onDetailRender,
                                modal: this.props.modal }),
                            this.props.pageSize && React.createElement(CrudPagination, { controller: controller })
                        )
                    )
                )
            )
        );
    }
}

CrudView.propTypes = {
    title: React.PropTypes.string,
    editorSchema: React.PropTypes.object,
    onCellRender: React.PropTypes.func.isRequired,
    onDetailRender: React.PropTypes.func,
    cellSize: React.PropTypes.object,
    perm: React.PropTypes.string,
    crud: React.PropTypes.object.isRequired,
    search: React.PropTypes.bool,
    pageSize: React.PropTypes.number,
    queryFilters: React.PropTypes.object,
    options: React.PropTypes.any,
    modal: React.PropTypes.bool,
    // if true, the card will have no bottom margin
    combine: React.PropTypes.bool,
    children: React.PropTypes.node,
    // refresh all list on a CUD operation
    refreshAll: React.PropTypes.bool,
    // if true, the forms will be fetched from the server
    remoteForm: React.PropTypes.bool
};

CrudView.defaultProps = {
    search: false,
    modal: false,
    paging: false,
    cellSize: { md: 6 }
};