import React from 'react';
import { Nav, NavItem, Alert } from 'react-bootstrap';
import { Card, Profile, WaitIcon, ReactTable } from '../../components';
import { server } from '../../commons/server';
import moment from 'moment';
import SessionUtils from '../session-utils';
import { getOptionName } from '../mock-option-lists';
import TreatProgress from '../case/treat/treat-progress';

/**
 * Display the active cases of the selected unit. The unit ID is in the URL
 */
export default class CasesUnit extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            sel: 0
        };
        this.tabSelect = this.tabSelect.bind(this);
    }

    componentWillMount() {
        this.updateState(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.updateState(nextProps);
    }

    updateState(props) {
        const newId = props.route.queryParam('id');
        const id = this.state.id;

        if (!id === newId) {
            return;
        }

        const self = this;

        server.post('/api/cases/unit/' + newId).then(res => self.setState({
            cases: res,
            id: newId,
            sel: res.presumptives && res.presumptives.length > 0 ? 0 : 1
        }));
    }

    listCount(lst) {
        const count = lst.length > 0 ? lst.length : '-';
        return React.createElement(
            'div',
            { className: 'value-big text-success' },
            count
        );
    }

    tbCasesRender() {
        const lst = this.state.cases.tbCases;
        return this.confirmRender(lst);
    }

    drtbCasesRender() {
        const lst = this.state.cases.drtbCases;
        return this.confirmRender(lst);
    }

    confirmRender(lst) {
        if (lst.length === 0) {
            return this.noRecFoundRender();
        }

        return React.createElement(ReactTable, { className: 'mtop-2x',
            columns: [{
                title: __('Patient'),
                size: { sm: 4 },
                content: item => React.createElement(Profile, { type: item.gender.toLowerCase(), size: 'small',
                    title: SessionUtils.nameDisplay(item.name), subtitle: item.caseNumber })
            }, {
                title: __('TbCase.registrationDate'),
                size: { sm: 2 },
                content: item => {
                    const dt = moment(item.registrationDate);
                    return React.createElement(
                        'div',
                        null,
                        dt.format('L'),
                        React.createElement(
                            'div',
                            { className: 'sub-text' },
                            dt.fromNow()
                        )
                    );
                }
            }, {
                title: __('TbCase.registrationGroup'),
                size: { sm: 2 },
                content: item => React.createElement(
                    'div',
                    null,
                    getOptionName('registrationGroup', item.registrationGroup),
                    React.createElement('br', null),
                    item.infectionSite ? item.infectionSite.name : null
                )
            }, {
                title: __('TbCase.iniTreatmentDate'),
                size: { sm: 2 },
                content: item => {
                    if (!item.iniTreatmentDate) {
                        return React.createElement(
                            'div',
                            null,
                            '-'
                        );
                    }
                    const dt = moment(item.iniTreatmentDate);
                    return React.createElement(
                        'div',
                        null,
                        dt.format('L'),
                        React.createElement(
                            'div',
                            { className: 'sub-text' },
                            dt.fromNow()
                        )
                    );
                }
            }, {
                title: __('cases.mantreatment'),
                size: { sm: 2 },
                align: 'center',
                content: i => i.treatmentProgress ? React.createElement(TreatProgress, { value: i.treatmentProgress, width: 45, height: 45 }) : '-'
            }], values: lst, onClick: this.caseClick });
    }

    /**
     * Return the list of cases to be displayed
     * @return {React.Component} Component displaying the cases
     */
    presumptiveRender() {
        const lst = this.state.cases.presumptives;

        // is there any case to display ?
        if (lst.length === 0) {
            return this.noRecFoundRender();
        }

        return React.createElement(ReactTable, { columns: [{
                title: __('Patient'),
                size: { sm: 4 },
                content: item => React.createElement(Profile, { type: item.gender.toLowerCase(), size: 'small',
                    title: SessionUtils.nameDisplay(item.name), subtitle: item.caseNumber })
            }, {
                title: __('TbCase.registrationDate'),
                size: { sm: 3 },
                content: item => {
                    const dt = moment(item.registrationDate);
                    return React.createElement(
                        'div',
                        null,
                        dt.format('L'),
                        React.createElement(
                            'div',
                            { className: 'sub-text' },
                            dt.fromNow()
                        )
                    );
                }
            }, {
                title: __('FollowUpType.XPERT'),
                size: { sm: 2 },
                content: item => item.xpertResult ? item.xpertResult.name : '-'
            }, {
                title: __('FollowUpType.EXAM_MICROSCOPY'),
                size: { sm: 2 },
                content: item => item.microscopyResult ? item.microscopyResult.name : '-'
            }], values: lst, className: 'mtop-2x', onClick: this.caseClick });
    }

    /**
     * Return a message displaying 'No record found'
     * @return {[type]} [description]
     */
    noRecFoundRender() {
        return React.createElement(
            'div',
            { className: 'card-default mtop-2x' },
            React.createElement(
                'div',
                { className: 'card-content' },
                React.createElement(
                    Alert,
                    { bsStyle: 'warning' },
                    __('form.norecordfound')
                )
            )
        );
    }

    /**
     * Called when user clicks on a case
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    caseClick(item) {
        window.location.hash = SessionUtils.caseHash(item.id);
    }

    tabSelect(evt) {
        this.setState({ sel: evt });
    }

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

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

        const tabs = React.createElement(
            Nav,
            { bsStyle: 'tabs', activeKey: this.state.sel, justified: true,
                className: 'app-tabs2',
                onSelect: this.tabSelect },
            cases.presumptives.length > 0 && React.createElement(
                NavItem,
                { key: 0, eventKey: 0 },
                this.listCount(cases.presumptives),
                __('cases.suspects')
            ),
            React.createElement(
                NavItem,
                { key: 1, eventKey: 1 },
                this.listCount(cases.tbCases),
                __('cases.tb')
            ),
            React.createElement(
                NavItem,
                { key: 2, eventKey: 2 },
                this.listCount(cases.drtbCases),
                __('cases.drtb')
            )
        );

        return React.createElement(
            Card,
            { padding: 'none' },
            tabs,
            this.state.sel === 0 ? this.presumptiveRender() : null,
            this.state.sel === 1 ? this.tbCasesRender() : null,
            this.state.sel === 2 ? this.drtbCasesRender() : null
        );
    }
}

CasesUnit.propTypes = {
    route: React.PropTypes.object.isRequired
};