import React from 'react';
import { Overlay, Popover, ButtonToolbar, Button } from 'react-bootstrap';
import ReactDOM from 'react-dom';
import { durationDisplay } from '../../../commons/utils';
import { app } from '../../../core/app';

export default class TreatPopup extends React.Component {

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

    _getTarget() {
        return ReactDOM.findDOMNode(this.props.target);
    }

    renderPeriod(period) {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'div',
                { className: 'clearfix' },
                React.createElement(
                    'div',
                    { className: 'pull-left' },
                    period.ini.format('L')
                ),
                React.createElement(
                    'div',
                    { className: 'pull-right' },
                    period.end.format('L')
                )
            ),
            React.createElement(
                'div',
                null,
                React.createElement(
                    'b',
                    null,
                    __('period.duration') + ': '
                ),
                durationDisplay(period.ini, period.end)
            )
        );
    }

    renderUnit(data) {
        return React.createElement(
            'div',
            { style: { minWidth: '230px' } },
            this.renderPeriod(data)
        );
    }

    renderPresc(data) {
        const onDeleteClick = () => app.messageDlg({
            title: __('cases.treat.prescription.delete'),
            message: __('form.confirm_remove'),
            style: 'warning',
            type: 'YesNo'
        }).then(res => {
            if (res === 'yes') {
                app.dispatch('del-prescription', data);
            }
        });

        const onEditClick = () => app.dispatch('edt-prescription', this.props.data.data);

        return React.createElement(
            'div',
            { style: { minWidth: '230px' } },
            this.renderPeriod(data),
            React.createElement(
                'div',
                null,
                React.createElement(
                    'b',
                    null,
                    __('PrescribedMedicine.frequency') + ': '
                ),
                data.data.frequency + '/7'
            ),
            React.createElement(
                'div',
                null,
                React.createElement(
                    'b',
                    null,
                    __('PrescribedMedicine.doseUnit') + ': '
                ),
                data.data.doseUnit
            ),
            data.data.comments && React.createElement(
                'div',
                null,
                React.createElement(
                    'b',
                    null,
                    __('global.comments') + ': '
                ),
                data.data.comments
            ),
            React.createElement(
                'div',
                { className: 'mtop-2x' },
                React.createElement(
                    ButtonToolbar,
                    null,
                    React.createElement(
                        Button,
                        { onClick: onEditClick, bsStyle: 'primary' },
                        __('action.edit')
                    ),
                    React.createElement(
                        Button,
                        { onClick: onDeleteClick },
                        __('action.delete')
                    )
                )
            )
        );
    }

    render() {
        if (!this.props.target) {
            return null;
        }

        const data = this.props.data;

        const res = data.presc ? {
            title: data.presc.product.name,
            content: this.renderPresc(data)
        } : {
            title: data.text,
            content: this.renderUnit(data)
        };

        return React.createElement(
            Overlay,
            {
                rootClose: true,
                onHide: this.props.onHide,
                show: this.props.show,
                target: this._getTarget,
                placement: 'bottom' },
            React.createElement(
                Popover,
                { title: React.createElement(
                        'b',
                        null,
                        res.title
                    ), id: 'ppbar' },
                res.content
            )
        );
    }
}

TreatPopup.propTypes = {
    title: React.PropTypes.string,
    show: React.PropTypes.bool,
    target: React.PropTypes.any,
    data: React.PropTypes.object,
    onHide: React.PropTypes.func
};