import React from 'react';
import CrudView from '../packages/crud/crud-view';
import CaseComments from './case-comments';
import CRUD from '../../commons/crud';
import { Profile } from '../../components';
import { getOptionName, getOptionList } from '../mock-option-lists';

const crud = new CRUD('sideeffect');

export default class CaseAdvReact extends React.Component {

    constructor(props) {
        super(props);

        // form fields for contacts
        const editorSchema = {
            defaultProperties: {
                tbcaseId: props.tbcase.id
            },
            controls: [{
                type: 'select',
                label: __('cases.sideeffects.desc'),
                property: 'sideEffect',
                required: true,
                options: getOptionList('advReactions'),
                size: { sm: 12 }
            }, {
                type: 'select',
                property: 'month',
                label: __('cases.sideeffects.month'),
                required: true,
                options: { from: 1, to: 24 },
                size: { sm: 6 }
            }, {
                type: 'select',
                label: __('cases.sideeffects.medicine'),
                property: 'substanceId',
                options: 'substances',
                size: { sm: 12 }
            }, {
                type: 'select',
                label: __('cases.sideeffects.medicine'),
                property: 'substance2Id',
                options: 'substances',
                size: { sm: 12 }
            }, {
                type: 'text',
                property: 'comment',
                label: __('global.comments'),
                size: { sm: 12 }
            }],
            title: doc => doc && doc.id ? __('case.sideeffect.edt') : __('case.sideeffect.new')
        };

        this.state = { editorSchema: editorSchema };
    }

    cellRender(item) {
        const subtitle = React.createElement(
            'div',
            null,
            React.createElement(
                'b',
                null,
                __('cases.sideeffects.month') + ': '
            ),
            item.month
        );

        return React.createElement(Profile, { title: getOptionName('advReactions', item.sideEffect),
            subtitle: subtitle,
            size: 'small' });
    }

    collapseCellRender(item) {
        const ret = React.createElement(
            'div',
            null,
            React.createElement('hr', null),
            React.createElement(
                'dl',
                { className: 'dl-horizontal' },
                React.createElement(
                    'dt',
                    null,
                    __('cases.sideeffects.medicine') + ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    item.medicines ? item.medicines : '-'
                ),
                React.createElement(
                    'dt',
                    null,
                    __('global.comments') + ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    item.comment ? item.comment : '-'
                )
            ),
            React.createElement('hr', null)
        );

        return ret;
    }

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

        return React.createElement(
            CaseComments,
            {
                tbcase: tbcase, group: 'ADV_REACTS' },
            React.createElement(CrudView, { combine: true, modal: true,
                title: __('cases.sideeffects'),
                editorSchema: this.state.editorSchema,
                crud: crud,
                cellSize: { md: 12 },
                onCellRender: this.cellRender,
                onDetailRender: this.collapseCellRender,
                queryFilters: { tbcaseId: tbcase.id },
                perm: 'ADV_EFFECTS'
            })
        );
    }
}

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