import React from 'react';

import {FormattedMessage} from 'react-intl';

import {AllBadgesBadge} from '../../types/badges';
import BadgeImage from '../utils/badge_image';
import {markdown} from 'utils/markdown';

import './all_badges_row.scss';

type Props = {
    badge: AllBadgesBadge;
    onClick: (badge: AllBadgesBadge) => void;
}

function getGrantedText(badge: AllBadgesBadge): React.ReactNode {
    if (badge.granted === 0) {
        return (
            <FormattedMessage
                id='badges.granted.not_yet'
                defaultMessage='Ещё не выдан.'
            />
        );
    }
    if (badge.multiple) {
        return (
            <FormattedMessage
                id='badges.granted.multiple'
                defaultMessage='Выдан {times, plural, one {# раз} few {# раза} many {# раз} other {# раз}} {users, plural, one {# пользователю} few {# пользователям} many {# пользователям} other {# пользователям}}.'
                values={{times: badge.granted_times, users: badge.granted}}
            />
        );
    }

    return (
        <FormattedMessage
            id='badges.granted.single'
            defaultMessage='Выдан {users, plural, one {# пользователю} few {# пользователям} many {# пользователям} other {# пользователям}}.'
            values={{users: badge.granted}}
        />
    );
}

const AllBadgesRow: React.FC<Props> = ({badge, onClick}: Props) => {
    return (
        <div className='AllBadgesRow'>
            <a
                className='badge-icon'
                onClick={() => onClick(badge)}
            >
                <span>
                    <BadgeImage
                        badge={badge}
                        size={32}
                    />
                </span>
            </a>
            <div>
                <div className='badge-name'>{badge.name}</div>
                <div className='badge-description'>{markdown(badge.description)}</div>
                <div className='badge-type'>
                    <FormattedMessage
                        id='badges.label.type'
                        defaultMessage='Тип: {typeName}'
                        values={{typeName: badge.type_name}}
                    />
                </div>
                <div className='granted-by'>{getGrantedText(badge)}</div>
            </div>
        </div>
    );
};

export default AllBadgesRow;
