import React from 'react';
import Form from '../../forms/form';
import { Card, Fa } from '../../components';
import { OverlayTrigger, Tooltip, Col, Row } from 'react-bootstrap';

import moment from 'moment';
import { getDisplaySchema, getFollowUpType } from './followup-utils';

export default class FollowupDisplay extends React.Component {

    constructor(props) {
        super(props);
    }

    renderButtons() {
        return React.createElement(
            'div',
            { className: 'pull-right' },
            React.createElement(
                'a',
                { className: 'lnk-muted', onClick: this.props.onEdit },
                React.createElement(Fa, { icon: 'pencil' }),
                __('action.edit')
            ),
            React.createElement(
                OverlayTrigger,
                { placement: 'top', overlay: React.createElement(
                        Tooltip,
                        { id: 'actdel' },
                        __('action.delete')
                    ) },
                React.createElement(
                    'a',
                    { className: 'lnk-muted', onClick: this.props.onDelete },
                    React.createElement(Fa, { icon: 'trash-o' })
                )
            )
        );
    }

    renderHeader() {
        const followup = this.props.followup;
        const followUpType = getFollowUpType(followup.type);

        const schema = getDisplaySchema(followup.type);
        const doc = followup.data;

        if (!schema || !doc) {
            return null;
        }

        var month = ' - ';
        month = month + followup.monthOfTreatment;

        const subtitle = React.createElement(
            'div',
            null,
            moment(doc.date).format('ll'),
            followup.monthOfTreatment && React.createElement(
                'span',
                null,
                month
            )
        );

        const header = React.createElement(
            Row,
            { className: 'profile profile-medium' },
            React.createElement(
                Col,
                { sm: 10 },
                React.createElement(
                    'div',
                    { className: 'profile-image' },
                    React.createElement(Fa, { icon: followUpType.icon })
                ),
                React.createElement(
                    'div',
                    { className: 'profile-title' },
                    followup.name
                ),
                React.createElement(
                    'div',
                    { className: 'profile-subtitle' },
                    subtitle
                )
            ),
            React.createElement(
                Col,
                { sm: 2 },
                React.createElement(
                    'div',
                    { className: 'text-right' },
                    this.renderButtons()
                )
            ),
            React.createElement(
                Col,
                { sm: 12 },
                React.createElement('hr', null)
            )
        );

        return header;
    }

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

        const schema = getDisplaySchema(followup.type);
        const doc = followup.data;

        if (!schema || !doc) {
            return null;
        }

        return React.createElement(
            Card,
            { header: this.renderHeader() },
            React.createElement(Form, { schema: schema, doc: doc, readOnly: true })
        );
    }
}

FollowupDisplay.propTypes = {
    followup: React.PropTypes.object.isRequired,
    onEdit: React.PropTypes.func,
    onDelete: React.PropTypes.func
};