import React from 'react';

import { ProjectAvatar } from '../aui-react/avatar';

const propTypes = {
    scmRef: React.PropTypes.any.isRequired,
    repository: React.PropTypes.any,
    title: React.PropTypes.string,
    accessibilityText: React.PropTypes.string,
};

const RefLabel = props => {
    const ref = props.scmRef;
    const repo = props.repository;
    const accessibilityText = props.accessibilityText ||
        AJS.I18n.getText('refLabel.branch.ariaLabel', ref.display_id);

    return (
        <span className="ref-label" title={props.title}>
            {repo && <span className="repository">
                {repo.project && <ProjectAvatar size="xsmall" project={repo.project} />}
                <span className="name">{repo.name}</span>
            </span>}
            <span className={"ref " + (ref.type || 'branch')}>
                <span className="name" aria-label={accessibilityText}>
                    {ref.display_id}
                </span>
            </span>
        </span>
    );
};

RefLabel.propTypes = propTypes;

export default RefLabel;
