import AJS from 'aui';
import classNames from 'classnames';
import { Component, PropTypes } from 'react';
import InlineDialog, { InlineDialogTrigger } from '../aui-react/inline-dialog';
import { SelfAction } from '../models/models';
import ReviewerAvatar from '../reviewer-avatar/reviewer-avatar';
import Tipsy from '../tipsy/tipsy';

const propTypes = {
    currentUserAsReviewer: PropTypes.object,
    isWatching: PropTypes.bool,
    onSelfClick: PropTypes.func.isRequired,
    removeSelfModalId: PropTypes.string.isRequired,
};

class SelfReviewer extends Component {
    constructor() {
        super();
        // hover state is managed by js because chrome
        // does not fire mouse events on elements that
        // have a parent that is animating
        this.state = { hovered: false };
    }

    mouseEnter(e) {
        this.setState({ hovered: true });
    }

    mouseLeave(e) {
        this.setState({ hovered: false });
    }

    createUnwatchMarkup() {
        return { __html: AJS.I18n.getText('bitbucket.component.self.reviewer.unwatch.html') };
    }

    render() {
        const initTipsyDelay = 500; // delay 'remove yourself' tipsy so it doesn't appear during animation
        const currentUserAsReviewer = this.props.currentUserAsReviewer;
        const unWatchCheckbox = (
            <p>
                <label>
                    <input
                        className="checkbox"
                        type="checkbox"
                        ref={el => {
                            this._unwatchCheckbox = el;
                        }}
                    />
                    <span dangerouslySetInnerHTML={this.createUnwatchMarkup()} />
                </label>
            </p>
        );

        if (!currentUserAsReviewer) {
            return (
                <div className="self-avatar">
                    <Tipsy
                        key="add-self"
                        ref={el => {
                            this._add_self = el;
                        }}
                        title={AJS.I18n.getText('bitbucket.component.self.reviewer.add')}
                        className="add-self"
                    >
                        <button
                            onClick={() => {
                                this.setState({ hovered: false });
                                this.props.onSelfClick(SelfAction.ADD_SELF);
                            }}
                            className="aui-button"
                        >+</button>
                    </Tipsy>
                </div>
            );
        }

        return (
            <div
                className={classNames('self-avatar', { jsHover: this.state.hovered, reviewing: this.props.currentUserAsReviewer })}
                onMouseEnter={() => this.mouseEnter()}
                onMouseLeave={() => this.mouseLeave()}
            >
                <Tipsy
                    key="remove-self"
                    title={AJS.I18n.getText('bitbucket.component.self.reviewer.remove')}
                    className="remove-self"
                    delay={initTipsyDelay}
                >
                    <InlineDialogTrigger
                        dialogId={this.props.removeSelfModalId}
                        className="aui-button"
                    >
                        –
                    </InlineDialogTrigger>
                </Tipsy>

                <InlineDialog
                    key="remove_self_dialog"
                    id={this.props.removeSelfModalId}
                    className="remove-self-dialog"
                    alignment="bottom right"
                >
                    <h5>{AJS.I18n.getText('bitbucket.component.self.reviewer.remove.confirm.header')}</h5>
                    <p>{AJS.I18n.getText('bitbucket.component.self.reviewer.remove.confirm')}</p>

                    {this.props.isWatching ? unWatchCheckbox : null}
                    <p>
                        <button
                            className="aui-button"
                            onClick={e => this.props.onSelfClick(SelfAction.REMOVE_SELF,
                                (this._unwatchCheckbox ? this._unwatchCheckbox.checked : null))}
                        >
                            {AJS.I18n.getText('bitbucket.component.self.reviewer.remove.confirm.button')}
                        </button>
                    </p>
                </InlineDialog>

                <ReviewerAvatar reviewer={currentUserAsReviewer} tooltip={false} />;

            </div>
        );
    }
}

SelfReviewer.propTypes = propTypes;

export default SelfReviewer;
