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

const crud = new CRUD('contact');

export default class CaseContacts extends React.Component {

    constructor(props) {
        super(props);
        this.cellRender = this.cellRender.bind(this);
        this.collapseCellRender = this.collapseCellRender.bind(this);

        const editorSchema = {
            defaultProperties: {
                tbcaseId: props.tbcase.id
            },
            controls: [{
                type: 'string',
                label: __('CaseContact.name'),
                property: 'name',
                required: true,
                max: 100,
                size: { sm: 12 }
            }, {
                type: 'select',
                property: 'gender',
                label: __('Gender'),
                required: true,
                options: [{ id: 'MALE', name: __('Gender.MALE') }, { id: 'FEMALE', name: __('Gender.FEMALE') }],
                size: { sm: 6 }
            }, {
                type: 'number',
                property: 'age',
                label: __('TbCase.age'),
                required: true,
                size: { sm: 6 }
            }, {
                type: 'select',
                property: 'contactType',
                label: __('TbField.CONTACTTYPE'),
                required: true,
                options: getOptionList('contactType')
            }, {
                type: 'yesNo',
                property: 'examinated',
                label: __('CaseContact.examined'),
                required: true,
                size: { sm: 6 }
            }, {
                type: 'date',
                property: 'dateOfExamination',
                label: __('CaseContact.dateOfExamination'),
                visible: value => value.examinated,
                size: { sm: 6 }
            }, {
                type: 'select',
                label: __('CaseContact.conduct'),
                property: 'conduct',
                options: getOptionList('contactConduct'),
                size: { sm: 12 }
            }, {
                type: 'text',
                label: __('global.comments'),
                property: 'comments',
                size: { sm: 12 }
            }],
            title: doc => doc && doc.id ? __('case.casecontact.edt') : __('case.casecontact.new')
        };

        this.state = { editorSchema: editorSchema };
    }

    cellRender(item) {
        return React.createElement(Profile, { size: 'small', type: item.gender.toLowerCase(),
            title: item.name, subtitle: __('TbCase.age') + ': ' + item.age + ' - ' + getOptionName('contactType', item.contactType) });
    }

    collapseCellRender(item) {
        const YesNo = Form.types.yesNo;
        const ret = React.createElement(
            'div',
            null,
            React.createElement('hr', null),
            React.createElement(
                'dl',
                { className: 'dl-horizontal' },
                React.createElement(
                    'dt',
                    null,
                    __('CaseContact.examined') + ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    React.createElement(YesNo, { value: item.examinated, noForm: true })
                ),
                React.createElement(
                    'dt',
                    null,
                    __('CaseContact.dateOfExamination') + ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    item.dateOfExamination ? moment(item.dateOfExamination).format('ll') : '-'
                ),
                React.createElement(
                    'dt',
                    null,
                    __('CaseContact.conduct') + ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    item.conduct ? getOptionName('contactConduct', item.conduct) : '-'
                ),
                React.createElement(
                    'dt',
                    null,
                    __('global.comments') + ':'
                ),
                React.createElement(
                    'dd',
                    null,
                    item.comments ? item.comments : '-'
                )
            ),
            React.createElement('hr', null)
        );

        return ret;
    }

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

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

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