import React from 'react';
import { ButtonToolbar, Button, Collapse } from 'react-bootstrap';
import { ReactTable, WaitIcon, AsyncButton } from '../../../components';
import CrudForm from './crud-form';

export default class CrudTable extends React.Component {
    constructor(props) {
        super(props);

        this.expandRender = this.expandRender.bind(this);
        this.editClick = this.editClick.bind(this);
        this.deleteClick = this.deleteClick.bind(this);
        this.rowRender = this.rowRender.bind(this);
    }

    componentWillMount() {
        const self = this;
        const handler = this.props.controller.on(evt => {
            if (evt === 'list' || evt === 'fetching-list') {
                self.forceUpdate();
            }
        });

        this.setState({ values: null, handler: handler });
    }

    componentWillUnmount() {
        this.props.controller.removeListener(this.state.handler);
    }

    /**
     * Called when user clicks on the edit button
     */
    editClick(item, row) {
        return evt => {
            evt.preventDefault();

            if (this.edtitem) {
                return;
            }

            const controller = this.props.controller;

            controller.openForm(item).then(() => {
                row.forceUpdate();

                const handler = controller.on(e => {
                    if (e === 'close-form') {
                        controller.removeListener(handler);
                        row.forceUpdate();
                    }
                });
            }).catch(() => row.forceUpdate());

            row.forceUpdate();
        };
    }

    /**
     * Called when user clicks on the delete button
     */
    deleteClick(item) {
        return evt => {
            evt.preventDefault();
            this.props.controller.initDelete(item);
        };
    }

    expandRender(item, row) {
        const content = this.props.onExpandRender ? this.props.onExpandRender(item, row) : null;
        const controller = this.props.controller;

        return React.createElement(
            'div',
            null,
            content,
            React.createElement(
                ButtonToolbar,
                { className: 'mtop' },
                React.createElement(
                    AsyncButton,
                    { bsStyle: 'primary',
                        fetching: controller.formInfo && controller.formInfo.fetching,
                        onClick: this.editClick(item, row) },
                    __('action.edit')
                ),
                React.createElement(
                    Button,
                    { bsStyle: 'link',
                        onClick: this.deleteClick(item) },
                    __('action.delete')
                )
            )
        );
    }

    rowRender(item) {
        const controller = this.props.controller;
        const fi = controller.formInfo;

        // item is being edited ?
        if (!fi || fi.item !== item || fi.fetching || fi.closing) {
            return null;
        }

        // display cell for editing
        return React.createElement(
            Collapse,
            { 'in': true, transitionAppear: true },
            React.createElement(
                'div',
                { className: 'row card-content highlight' },
                React.createElement(CrudForm, { schema: this.props.editorSchema,
                    controller: controller, openOnEdit: true, wrapType: 'none' })
            )
        );
    }

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

        if (!controller.getList()) {
            return null;
        }

        return controller.isFetching() ? React.createElement(WaitIcon, { type: 'card' }) : React.createElement(ReactTable, { columns: this.props.columns,
            values: controller.getList(),
            onExpandRender: this.expandRender,
            onRowRender: this.rowRender });
    }
}

CrudTable.propTypes = {
    controller: React.PropTypes.object,
    columns: React.PropTypes.array,
    onExpandRender: React.PropTypes.func,
    editorSchema: React.PropTypes.object
};