import React from 'react';
import { Alert, Row, Col } from 'react-bootstrap';
import { Card, Profile, WaitIcon, ReactGrid } from '../../../components';
import Form from '../../../forms/form';

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

import CrudPagination from '../crud/crud-pagination';
import CrudCounter from '../crud/crud-counter';
import CrudController from '../crud/crud-controller';
import FakeCRUD from '../../../commons/fake-crud';

/**
 * Display a list of untis
 */
export default class UnitsCard extends React.Component {

    constructor(props) {
        super(props);
        this.loadList = this.loadList.bind(this);
        this.eventHandler = this.eventHandler.bind(this);

        // create fake-crud controller
        const unitFakeCRUD = new FakeCRUD('/api/tbl/unit/query');
        const opts = {
            pageSize: 50,
            readOnly: true,
            editorSchema: {},
            refreshAll: false
        };

        const controller = new CrudController(unitFakeCRUD, opts);
        this.state = { controller: controller };
    }

    componentWillMount() {
        const self = this;
        const handler = this.state.controller.on(evt => {
            self.eventHandler(evt);
        });
        this.setState({ handler: handler });

        this.loadList();
    }

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

    eventHandler(evt) {
        if (evt === 'list' || evt === 'fetching-list') {
            this.forceUpdate();
        }
    }

    loadList() {
        const self = this;

        const params = {
            type: 'TBUNIT',
            adminUnitId: this.props.scope === 'ADMINUNIT' ? this.props.scopeId : null
        };

        this.state.controller.initList(params).then(() => self.forceUpdate());
    }

    cellRender(item) {
        const auname = Form.types.adminUnit.controlClass().displayText(item.adminUnit);

        return React.createElement(Profile, { type: item.type.toLowerCase(),
            title: item.name,
            subtitle: auname,
            size: 'small',
            style: { margin: '5px', padding: '5px' } });
    }

    onCellClick(item) {
        window.location.hash = SessionUtils.unitHash(item.id, '/cases');
    }

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

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

        return React.createElement(
            Card,
            { title: __('admin.tbunits') },

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

            // show case list
            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: this.state.controller, showCounter: true, className: 'pull-right' })
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12, className: 'mtop-2x' },
                        React.createElement(ReactGrid, {
                            values: controller.getList(),
                            onCollapseRender: this.cellRender,
                            onReactCellClick: this.onCellClick })
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { sm: 12 },
                        React.createElement(CrudPagination, { controller: this.state.controller, showCounter: true, className: 'pull-right' })
                    )
                )
            ) : null
        );
    }
}

UnitsCard.propTypes = {
    scope: React.PropTypes.oneOf(['WORKSPACE', 'ADMINUNIT']).isRequired,
    scopeId: React.PropTypes.string,
    route: React.PropTypes.object.isRequired
};