import React from 'react';
import { OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
import { Profile, Fa, FormDialog, AutoheightInput } from '../../components';
import moment from 'moment';
import { app } from '../../core/app';

// definition of the form fields to edit tags
const issueEditorDef = {
    controls: [{
        property: 'text',
        type: 'text',
        required: true,
        label: __('Issue.answer'),
        size: { md: 12 }
    }],
    title: __('Issue.edtanswer')
};

export default class IssueFollowUpsBox extends React.Component {

    constructor(props) {
        super(props);
        this.addAnswer = this.addAnswer.bind(this);
        this.editClick = this.editClick.bind(this);
        this.modalClose = this.modalClose.bind(this);
        this.editConfirm = this.editConfirm.bind(this);
        this.textChange = this.textChange.bind(this);

        this.state = { disabled: true, doc: {} };
    }

    /**
     * Called when user adds a new comment
     */
    addAnswer() {
        const txt = this.refs.input.getText();
        this.props.onEvent('add', txt);
        this.refs.input.setText('');
    }

    /**
     * Return a function to be called when user clicks on the edit link
     * @param  {[type]} item [description]
     * @return {[type]}      [description]
     */
    editClick(item) {
        const self = this;
        return () => {
            self.setState({ edtitem: item, doc: { text: item.text } });
        };
    }

    /**
     * Called when user clicks on the close link
     * @return {[type]} [description]
     */
    modalClose() {
        this.setState({ edtitem: null });
    }

    /**
     * Called when user confirms the changed text in the dialog box
     * @return {[type]} [description]
     */
    editConfirm() {
        const item = this.state.edtitem;
        this.props.onEvent('edit', item, this.state.doc.text);
        this.modalClose();
    }

    /**
     * Return a function to be called when user clicks on the remove link
     * @param  {[type]} item [description]
     * @return {[type]}      [description]
     */
    removeClick(item) {
        return () => app.messageDlg({
            message: __('form.confirm_remove'),
            style: 'warning',
            type: 'YesNo'
        }).then(res => {
            if (res === 'yes') {
                this.props.onEvent('remove', item);
            }
        });
    }

    /**
     * Called when the text of the input box is changed. Enable or disable the add button
     */
    textChange() {
        this.setState({ disabled: !this.refs.input.getText().trim() });
    }

    followUpsRender(followups) {
        if (!followups || followups.length === 0) {
            return null;
        }

        return followups.map(followup => React.createElement(
            'div',
            { className: 'media', key: followup.id },
            React.createElement(
                'div',
                { className: 'media-left' },
                React.createElement(Profile, { type: 'user', size: 'small' })
            ),
            React.createElement(
                'div',
                { className: 'media-body' },
                React.createElement(
                    'div',
                    { className: 'pull-right' },
                    followup.id.indexOf('fakeid') < 0 && followup.id.indexOf('error') < 0 && React.createElement(
                        'span',
                        null,
                        React.createElement(
                            'a',
                            { className: 'lnk-muted', onClick: this.editClick(followup) },
                            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.removeClick(followup) },
                                React.createElement(Fa, { icon: 'remove' })
                            )
                        )
                    ),
                    followup.id.indexOf('fakeid') >= 0 && React.createElement(
                        'span',
                        { className: 'lnk-muted' },
                        React.createElement(Fa, { icon: 'circle-o-notch', spin: true }),
                        __('global.saving')
                    ),
                    followup.id.indexOf('error') >= 0 && React.createElement(
                        'span',
                        { className: 'bs-error' },
                        __('global.errorsaving')
                    )
                ),
                React.createElement(
                    'div',
                    { className: 'text-muted' },
                    React.createElement(
                        'b',
                        null,
                        followup.user.name
                    ),
                    ' ' + __('global.wrotein') + ' ',
                    React.createElement(
                        'b',
                        null,
                        moment(followup.followupDate).format('lll')
                    )
                ),
                React.createElement(
                    'div',
                    { className: 'sub-text' },
                    followup.unit.name
                ),
                followup.text.split('\n').map((item, index) => React.createElement(
                    'span',
                    { key: index },
                    item,
                    React.createElement('br', null)
                ))
            )
        ));
    }

    render() {

        const followups = this.props.issue.followups;

        return React.createElement(
            'div',
            null,
            this.followUpsRender(followups),
            this.props.issue.closed === false && React.createElement(
                'div',
                { className: 'mtop' },
                React.createElement(AutoheightInput, { ref: 'input', onChange: this.textChange }),
                React.createElement(
                    Button,
                    { bsStyle: 'primary',
                        disabled: this.state.disabled,
                        onClick: this.addAnswer,
                        bsSize: 'small',
                        style: { marginTop: '6px' } },
                    __('Issue.answer')
                )
            ),
            React.createElement(FormDialog, {
                schema: issueEditorDef,
                doc: this.state.doc,
                onCancel: this.modalClose,
                onConfirm: this.editConfirm,
                wrapType: 'modal',
                modalShow: !!this.state.edtitem })
        );
    }
}

IssueFollowUpsBox.propTypes = {
    issue: React.PropTypes.object.isRequired,
    /**
     * Possible events: add, edit, remove
     */
    onEvent: React.PropTypes.func
};