import AJS from 'aui';
import classNames from 'classnames';
import _ from 'lodash';
import React, { PropTypes } from 'react';

import { ApprovalState } from '../models/models';

const propTypes = {
    currentUserAsReviewer: PropTypes.object,
    onStatusClick: PropTypes.func.isRequired,
    status: PropTypes.oneOf(_.values(ApprovalState)),
};

const titles = {
    'approve': AJS.I18n.getText('bitbucket.component.reviewer.status.approve'),
    'approve-deselect': AJS.I18n.getText('bitbucket.component.reviewer.status.approve.deselect'),
    'needs-work': AJS.I18n.getText('bitbucket.component.reviewer.status.needs.work'),
    'needs-work-deselect': AJS.I18n.getText('bitbucket.component.reviewer.status.needs.work.deselect'),
};

const titlesWithLineBreaks = {
    'approve': AJS.I18n.getText('bitbucket.component.reviewer.status.approve.html'),
    'approve-deselect': AJS.I18n.getText('bitbucket.component.reviewer.status.approve.deselect.html'),
    'needs-work': AJS.I18n.getText('bitbucket.component.reviewer.status.needs.work.html'),
    'needs-work-deselect': AJS.I18n.getText('bitbucket.component.reviewer.status.needs.work.deselect.html'),
};

const ReviewerStatus = props => {
    function makeStatus(status, cssClass) {
        const isPressed = props.status === status;
        return (
            <button
                className={"aui-button " + cssClass}
                aria-pressed={isPressed}
                title={titlesWithLineBreaks[cssClass + (isPressed ? '-deselect' : '')]}
                onClick={() => props.onStatusClick({ newStatus: isPressed ? ApprovalState.UNAPPROVED : status })}
                ref={el => AJS.$(el).tooltip({
                    html: true,
                })}
            >
                <span>{titles[cssClass + (isPressed ? '-deselect' : '')]}</span>
            </button>
        );
    }

    return (
        <div className={classNames('aui-buttons', 'reviewer-status-selector', { reviewing: props.currentUserAsReviewer })} data-status={props.status}>
            {makeStatus(ApprovalState.NEEDS_WORK, 'needs-work')}
            {makeStatus(ApprovalState.APPROVED, 'approve')}
        </div>
    );
};
ReviewerStatus.propTypes = propTypes;

export default ReviewerStatus;
