import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import { TreeView, Card, Fa, WaitIcon } from '../../../components';
import SessionUtils from '../../session-utils';
import { server } from '../../../commons/server';

/**
 * Display a card with a consolidated number of cases by administrative units
 * and units, grouped by suspected and confirmed TB, DR-TB and NTM
 */
export default class CasesDistribution extends React.Component {

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

    componentWillMount() {
        const auId = this.props.scope === 'ADMINUNIT' ? this.props.route.queryParam('id') : null;

        const self = this;

        this.fetchView(auId).then(res => self.setState({ root: res }));

        this.setState({ root: null });
    }

    fetchView(adminUnitId) {
        const params = adminUnitId ? '/adminunit?adminUnitId=' + adminUnitId : '';
        return server.post('/api/cases/view' + params);
    }

    getNodes(parent) {
        return server.post('/api/cases/view/places?parentId=' + parent.id);
    }

    nodeRender(node) {
        const hash = node.type === 'UNIT' ? SessionUtils.unitHash(node.id, '/cases') : SessionUtils.adminUnitHash(node.id, '/cases');

        return React.createElement(
            'a',
            { href: hash, className: 'lnk-label' },
            node.name
        );
    }

    outerRender(content, node) {
        function addRow(value) {
            return React.createElement(
                Col,
                { xs: 2, className: 'text-right' },
                value ? value : '-'
            );
        }

        return React.createElement(
            Row,
            { key: node.id, className: 'tbl-cell' },
            React.createElement(
                Col,
                { xs: 4 },
                content
            ),
            addRow(node.suspectCount),
            addRow(node.tbCount),
            addRow(node.drtbCount),
            addRow(node.ntmCount)
        );
    }

    nodeInfo(node) {
        return { leaf: !node.hasChildren };
    }

    iconLeaf(node) {
        const icon = node.type === 'UNIT' ? 'hospital-o' : 'circle-thin';
        return React.createElement(Fa, { icon: icon, size: 1.4, className: 'text-muted' });
    }

    titles() {
        return React.createElement(
            Row,
            { key: 'title', className: 'tbl-title' },
            React.createElement(
                Col,
                { xs: 4 },
                __('cases.title.places')
            ),
            React.createElement(
                Col,
                { xs: 2, className: 'text-right' },
                __('cases.suspects')
            ),
            React.createElement(
                Col,
                { xs: 2, className: 'text-right' },
                __('cases.title.tbcases')
            ),
            React.createElement(
                Col,
                { xs: 2, className: 'text-right' },
                __('cases.title.drtbcases')
            ),
            React.createElement(
                Col,
                { xs: 2, className: 'text-right' },
                __('cases.title.ntmcases')
            )
        );
    }

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

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

        return React.createElement(
            Card,
            { title: __('cases.distrib.places') },
            React.createElement(
                Grid,
                { fluid: true },
                React.createElement(TreeView, { root: root,
                    title: this.titles(),
                    iconSize: 1.4,
                    onGetNodes: this.getNodes,
                    innerRender: this.nodeRender,
                    outerRender: this.outerRender,
                    iconLeaf: this.iconLeaf,
                    nodeInfo: this.nodeInfo })
            )
        );
    }
}

CasesDistribution.propTypes = {
    scope: React.PropTypes.string,
    route: React.PropTypes.object
};