import classNames from 'classnames';
import _ from 'lodash';
import { Component, PropTypes } from 'react';

import Avatar from '../aui-react/avatar';
import BranchFromTo from '../branch-from-to/branch-from-to';
import { ApprovalState, PullRequestState } from '../models/models';
import ReviewerAvatarList from '../reviewer-avatar-list/reviewer-avatar-list';
import ReviewerStatus from '../reviewer-status/reviewer-status';

import Merge from './components/merge';
import PullRequestMore from './components/pull-request-more';
import ReOpenButton from './components/reopen-button';

const propTypes = {
    conditions: PropTypes.objectOf(PropTypes.bool),
    mergeHelp: PropTypes.object,
    currentUserAsReviewer: PropTypes.object,
    currentUserIsWatching: PropTypes.bool,
    currentUserStatus: PropTypes.oneOf(_.values(ApprovalState)),
    onMergeClick: PropTypes.func.isRequired,
    onReOpenClick: PropTypes.func.isRequired,
    onMergeHelpDialogClose: PropTypes.func,
    onMoreAction: PropTypes.func.isRequired,
    onSelfClick: PropTypes.func.isRequired,
    onStatusClick: PropTypes.func.isRequired,
    pullRequest: PropTypes.object.isRequired,
    permissionToReview: PropTypes.bool.isRequired,
    showMergeHelpDialog: PropTypes.bool,
};

const REVIEWERS_MAX_OPEN = 4;

class PullRequestHeader extends Component {

    pullRequestStateReadable(state) {
        const stateToReadable = {
            [PullRequestState.OPEN]: AJS.I18n.getText('bitbucket.component.pull.request.list.state.open'),
            [PullRequestState.DECLINED]: AJS.I18n.getText('bitbucket.component.pull.request.list.state.declined'),
            [PullRequestState.MERGED]: AJS.I18n.getText('bitbucket.component.pull.request.list.state.merged'),
        };
        return stateToReadable.hasOwnProperty(state) ? stateToReadable[state] : '';
    }

    render() {
        const { pullRequest } = this.props;
        const pullRequestIsOpen = pullRequest.state === PullRequestState.OPEN;
        let reOpenButton;
        let reviewerStatus;

        if (pullRequest.state === PullRequestState.DECLINED && this.props.conditions.canEdit) {
            reOpenButton = (
                <ReOpenButton
                    onReOpenClick={this.props.onReOpenClick}
                />
            );
        }

        if (pullRequestIsOpen) {
            reviewerStatus = (
                <ReviewerStatus
                    currentUserAsReviewer={this.props.currentUserAsReviewer}
                    onStatusClick={this.props.onStatusClick}
                    status={this.props.currentUserStatus}
                />
            );
        }

        return (
            <div className="pull-request-header">
                <div className="flexible">
                    <div className="pull-request-metadata">
                        <Avatar
                            className="author"
                            person={pullRequest.author}
                            withName
                            withLink
                        />
                        <BranchFromTo
                            fromRef={pullRequest.from_ref}
                            toRef={pullRequest.to_ref}
                        />
                        <div className="divider"></div>
                        <div
                            className={classNames('status', 'aui-lozenge', {
                                'aui-lozenge-complete': pullRequest.state === PullRequestState.OPEN,
                                'aui-lozenge-error': pullRequest.state === PullRequestState.DECLINED,
                                'aui-lozenge-success': pullRequest.state === PullRequestState.MERGED,
                            })}
                        >
                            {this.pullRequestStateReadable(pullRequest.state)}
                        </div>
                    </div>

                    <div className={classNames('pull-request-actions', { pullRequestIsOpen: pullRequestIsOpen })}>
                        <ReviewerAvatarList
                            reviewers={pullRequest.reviewers}
                            menuId="overflow-reviewers"
                            triggerClass="overflow-reviewers-trigger"
                            maxOpen={REVIEWERS_MAX_OPEN}
                            avatarSize="small"
                            reverse
                            onSelfClick={this.props.onSelfClick}
                            currentUserAsReviewer={this.props.currentUserAsReviewer}
                            isWatching={this.props.currentUserIsWatching}
                            permissionToReview={this.props.permissionToReview}
                            pullRequestIsOpen={pullRequestIsOpen}
                        />

                        {reviewerStatus}

                        <Merge
                            conditions={this.props.conditions}
                            mergeHelp={this.props.mergeHelp}
                            onMergeClick={this.props.onMergeClick}
                            onMergeHelpDialogClose={this.props.onMergeHelpDialogClose}
                            pullRequest={pullRequest}
                            showMergeHelpDialog={this.props.showMergeHelpDialog}
                        />

                        {reOpenButton}

                        <PullRequestMore
                            onMoreAction={this.props.onMoreAction}
                            isWatching={this.props.currentUserIsWatching}
                            conditions={this.props.conditions}
                            pullRequest={pullRequest}
                        />
                    </div>
                </div>
                <h2>{pullRequest.title}</h2>
            </div>
        );
    }
}

PullRequestHeader.propTypes = propTypes;

export default PullRequestHeader;
