import React from 'react';
import { Badge, Row, Col, Button } from 'react-bootstrap';
import CaseComments from './case-comments';
import { Card, Fa, FormDialog } from '../../components';
import { server } from '../../commons/server';

const fschema = {
    title: __('cases.comorbidities'),
    controls: [{
        property: 'alcoholExcessiveUse',
        type: 'yesNo',
        label: __('TbCase.alcoholExcessiveUse'),
        defaultValue: false,
        size: { md: 12 }
    }, {
        property: 'tobaccoUseWithin',
        type: 'yesNo',
        label: __('TbCase.tobaccoUseWithin'),
        defaultValue: false,
        size: { md: 12 }
    }, {
        property: 'aids',
        type: 'yesNo',
        label: __('TbCase.aids'),
        defaultValue: false,
        size: { md: 12 }
    }, {
        property: 'diabetes',
        type: 'yesNo',
        label: __('TbCase.diabetes'),
        defaultValue: false,
        size: { md: 12 }
    }, {
        property: 'anaemia',
        type: 'yesNo',
        label: __('TbCase.anaemia'),
        defaultValue: false,
        size: { md: 12 }
    }, {
        property: 'malnutrition',
        type: 'yesNo',
        label: __('TbCase.malnutrition'),
        defaultValue: false,
        size: { md: 12 }
    }]
};

export default class CaseComorbidities extends React.Component {

    constructor(props) {
        super(props);
        this.save = this.save.bind(this);
        this.showForm = this.showForm.bind(this);
        this.headerRender = this.headerRender.bind(this);

        this.state = { showForm: false };
    }

    componentWillMount() {
        const tbcase = this.props.tbcase;

        // create data for UI controlling
        const trueOnes = !tbcase || !tbcase.comorbidities ? [] : fschema.controls.filter(item => tbcase.comorbidities[item.property]);

        // create doc
        const doc = {};
        trueOnes.forEach(item => {
            doc[item.property] = true;
        });

        this.setState({ uidata: trueOnes, doc: doc });
    }

    headerRender() {
        let size = 12;
        const hasPerm = true;

        let btn;
        if (hasPerm && this.state.showForm === false) {
            btn = React.createElement(
                Button,
                { onClick: this.showForm(true) },
                React.createElement(Fa, { icon: 'pencil' }),
                __('action.edit')
            );
            size = 10;
        } else {
            btn = null;
        }

        return React.createElement(
            Row,
            null,
            React.createElement(
                Col,
                { sm: size },
                __('TbField.COMORBIDITY'),
                ' ',
                React.createElement(
                    Badge,
                    { className: 'tbl-counter' },
                    this.state.uidata.length > 0 ? this.state.uidata.length : '-'
                )
            ),
            btn && React.createElement(
                Col,
                { sm: 2 },
                React.createElement(
                    'div',
                    { className: 'pull-right' },
                    btn
                )
            )
        );
    }

    showForm(state) {
        const self = this;
        return () => self.setState({ showForm: state });
    }

    save() {
        return this.update(this.props.tbcase.id, this.state.doc).then(() => {
            const uidata = [];
            fschema.controls.forEach(item => {
                if (this.state.doc[item.property]) {
                    uidata.push(item);
                }
            });
            this.setState({ uidata: uidata, showForm: false });
        });
    }

    update(id, data) {
        return server.post('/api/cases/case/comorbidity/' + id, data).then(res => {
            if (!res.success) {
                return Promise.reject(res.errors);
            }
            return res.result;
        });
    }

    render() {
        const tbcase = this.props.tbcase;
        const data = this.state.uidata;

        // put 2 or less cols in each row
        const rows = [];
        let cols = [];
        data.forEach((item, index) => {
            cols.push(React.createElement(
                Col,
                { md: 6, key: item.field + '' + index },
                React.createElement(
                    Card,
                    null,
                    React.createElement(
                        'span',
                        null,
                        React.createElement(Fa, { icon: 'check' }),
                        React.createElement(
                            'span',
                            null,
                            item.label
                        )
                    )
                )
            ));

            if (cols.length === 2 || index === data.length - 1) {
                rows.push(React.createElement(
                    Row,
                    { key: index },
                    cols
                ));
                cols = [];
            }
        });

        return React.createElement(
            'span',
            null,
            React.createElement(FormDialog, {
                schema: fschema,
                doc: this.state.doc,
                onConfirm: this.save,
                onCancel: this.showForm(false),
                wrapType: 'modal',
                modalShow: this.state.showForm }),
            React.createElement(
                CaseComments,
                {
                    tbcase: tbcase, group: 'COMORBIDITIES' },
                React.createElement(
                    Card,
                    { header: this.headerRender(), padding: 'combine' },
                    rows
                )
            )
        );
    }
}

CaseComorbidities.propTypes = {
    tbcase: React.PropTypes.object
};