import React from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import { Profile, Fa, Card } from '../../components';
import moment from 'moment';
import { app } from '../../core/app';
import IssueFollowUpsBox from './issue-followups-box';
import CRUD from '../../commons/crud';

const crud = new CRUD('issuefollowup');

export default class IssueCard extends React.Component {

    constructor(props) {
        super(props);
        this.onFollowupEvent = this.onFollowupEvent.bind(this);
        this.addAnswer = this.addAnswer.bind(this);
        this.removeAnswer = this.removeAnswer.bind(this);
        this.editAnswer = this.editAnswer.bind(this);

        this.editIssueClick = this.editIssueClick.bind(this);
        this.confirmRemove = this.confirmRemove.bind(this);
        this.closeIssueClick = this.closeIssueClick.bind(this);
        this.reopenIssueClick = this.reopenIssueClick.bind(this);

        this.state = { doc: {}, showForm: false, answerBtnDisabled: true };
    }

    onFollowupEvent(evt, data, txt) {
        switch (evt) {
            case 'add':
                return this.addAnswer(data);
            case 'remove':
                return this.removeAnswer(data);
            case 'edit':
                return this.editAnswer(data, txt);
            default:
                throw new Error('Invalid ' + evt);
        }
    }

    addAnswer(txt) {
        if (!this.props.issue.followups) {
            this.props.issue.followups = [];
        }

        // add the new comment on UI
        const newAnswer = {
            id: 'fakeid-' + this.props.issue.followups.length,
            issueId: this.props.issue.id,
            text: txt,
            user: {
                id: app.getState().session.userId,
                name: app.getState().session.userName
            },
            unit: {
                id: app.getState().session.unitId,
                name: app.getState().session.unitName
            },
            followupDate: new Date()
        };

        this.props.issue.followups.push(newAnswer);
        this.forceUpdate();

        // create the new issue on database
        const prom = crud.create(newAnswer).then(id => {
            // updates new comment id, so edit and delete should work.
            newAnswer.id = id;
            this.forceUpdate();
        }).catch(() => {
            newAnswer.id = 'error-' + this.props.issue.followups.length;
            this.forceUpdate();
        });
        return prom;
    }

    removeAnswer(item) {
        // removes the comment from UI
        const lst = this.props.issue.followups;
        const index = lst.indexOf(item);
        this.props.issue.followups.splice(index, 1);
        this.forceUpdate();

        // delete the new comment on database
        crud.delete(item.id);
    }

    editAnswer(item, txt) {
        // refresh the comment on UI
        item.text = txt;
        this.forceUpdate();

        crud.update(item.id, item);
    }

    editIssueClick() {
        this.props.onIssueEvent('openedt', this.props.issue);
    }

    confirmRemove() {
        const self = this;
        app.messageDlg({
            message: __('form.confirm_remove'),
            style: 'warning',
            type: 'YesNo'
        }).then(res => {
            if (res === 'yes') {
                self.props.onIssueEvent('remove', this.props.issue);
            }
        });
    }

    closeIssueClick() {
        this.props.onIssueEvent('close', this.props.issue);
    }

    reopenIssueClick() {
        this.props.onIssueEvent('reopen', this.props.issue);
    }

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

        return React.createElement(
            Card,
            null,
            React.createElement(
                'div',
                { className: 'media' },
                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' },
                        issue.id.indexOf('fakeid') < 0 && issue.id.indexOf('error') < 0 && React.createElement(
                            'span',
                            null,
                            issue.closed ? React.createElement(
                                'a',
                                { className: 'lnk-muted', onClick: this.reopenIssueClick },
                                React.createElement(Fa, { icon: 'folder-open-o' }),
                                __('action.reopen')
                            ) : React.createElement(
                                'a',
                                { className: 'lnk-muted', onClick: this.closeIssueClick },
                                React.createElement(Fa, { icon: 'power-off' }),
                                __('action.close')
                            ),
                            React.createElement(
                                'a',
                                { className: 'lnk-muted', onClick: this.editIssueClick },
                                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.confirmRemove },
                                    React.createElement(Fa, { icon: 'trash-o' })
                                )
                            )
                        ),
                        issue.id.indexOf('fakeid') >= 0 && React.createElement(
                            'span',
                            { className: 'lnk-muted' },
                            React.createElement(Fa, { icon: 'circle-o-notch', spin: true }),
                            __('global.saving')
                        ),
                        issue.id.indexOf('error') >= 0 && React.createElement(
                            'span',
                            { className: 'bs-error' },
                            __('global.errorsaving')
                        )
                    ),
                    issue.closed ? React.createElement(
                        'span',
                        { className: 'status-box bg-default2 mright' },
                        __('Issue.closed')
                    ) : React.createElement(
                        'span',
                        { className: 'status-box bg-danger2 mright' },
                        __('Issue.open')
                    ),
                    React.createElement(
                        'div',
                        { className: 'inlineb' },
                        React.createElement(
                            'b',
                            null,
                            issue.title
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'text-muted' },
                        React.createElement(
                            'b',
                            null,
                            issue.user.name
                        ),
                        ' ' + __('global.wrotein') + ' ',
                        React.createElement(
                            'b',
                            null,
                            moment(issue.creationDate).format('lll')
                        )
                    ),
                    React.createElement(
                        'div',
                        { className: 'sub-text mbottom' },
                        issue.unit.name
                    ),
                    issue.description.split('\n').map((item, i) => React.createElement(
                        'span',
                        { key: i },
                        item,
                        React.createElement('br', null)
                    )),
                    React.createElement(IssueFollowUpsBox, { issue: issue, onEvent: this.onFollowupEvent })
                )
            )
        );
    }
}

IssueCard.propTypes = {
    issue: React.PropTypes.object.isRequired,
    onEditEvent: React.PropTypes.func,
    onRemoveEvent: React.PropTypes.func,
    /**
     * Possible events: openedt, remove, reopen, close
     */
    onIssueEvent: React.PropTypes.func
};