import React from 'react';
import { Alert, Row, Col } from 'react-bootstrap';
import { Profile, WaitIcon, ReactTable } from '../../../components';

import U from '../../session-utils';

import CrudPagination from '../crud/crud-pagination';
import CrudCounter from '../crud/crud-counter';

/**
 * Standard displaying of a list of cases inside a react table, with pagination support
 */
export default class CasesList extends React.Component {

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

    componentWillMount() {
        this._registerListener(this.props.controller);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.controller !== nextProps.controller) {
            this._removeListener();
            this._registerListener(nextProps.controller);
        }
    }

    componentWillUnmount() {
        this._removeListener();
    }

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

    _removeListener() {
        // remove registration
        this.props.controller.removeListener(this.state.handler);
    }

    /**
     * Called when user clicks on a case
     */
    _caseClick(item) {
        if (this.props.onCaseClick) {
            this.props.onCaseClick(item);
        }
    }

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

        if (controller.isFetching()) {
            return React.createElement(WaitIcon, { type: 'card' });
        }

        return React.createElement(
            'div',
            null,

            // no results found
            !controller.isFetching() && (!controller.getList() || controller.getList().length < 1) ? React.createElement(
                Alert,
                { bsStyle: 'warning' },
                __('form.norecordfound')
            ) : null,

            // show case list
            !controller.isFetching() && controller.getList() && controller.getList().length > 0 ? React.createElement(
                'span',
                null,
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 6 },
                        React.createElement(CrudCounter, { controller: controller, className: 'mtop-=2x text-muted' })
                    ),
                    React.createElement(
                        Col,
                        { sm: 6 },
                        React.createElement(CrudPagination, { controller: controller, showCounter: true, className: 'pull-right' })
                    )
                ),
                React.createElement(ReactTable, { className: 'mtop-2x',
                    columns: [{
                        title: 'Patient',
                        size: { sm: 4 },
                        content: item => React.createElement(Profile, { type: item.gender.toLowerCase(), size: 'small',
                            title: U.nameDisplay(item.name), subtitle: item.caseCode })
                    }, {
                        title: 'Case Info',
                        size: { sm: 2 },
                        content: item => React.createElement(
                            'div',
                            null,
                            U.classifDisplay(item.classification, item.diagnosisType),
                            React.createElement('br', null),
                            React.createElement(
                                'div',
                                { className: 'sub-text' },
                                U.caseStateDisplay(item.state)
                            )
                        )
                    }, {
                        title: 'Unit',
                        size: { sm: 6 },
                        content: item => React.createElement(
                            'div',
                            null,
                            item.unit.name,
                            React.createElement('br', null),
                            React.createElement(
                                'div',
                                { className: 'sub-text' },
                                U.adminUnitDisplay(item.unit.adminUnit, false, true)
                            )
                        )
                    }], values: controller.getList(), onClick: this._caseClick }),
                React.createElement(CrudPagination, { controller: this.props.controller, showCounter: true, className: 'mtop' })
            ) : null
        );
    }
}

CasesList.propTypes = {
    controller: React.PropTypes.object,
    query: React.PropTypes.object,
    onCaseClick: React.PropTypes.func
};