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'
            onClick={() => onClick(badge)}
        >
            <span className='badge-icon'>
                <BadgeImage
                    badge={badge}
                    size={36}
                />
            </span>
            <div className='badge-text'>
                <div className='badge-name'>
                    <span className='badge-label'>
                        <FormattedMessage
                            id='badges.label.name'
                            defaultMessage='Название:'
                        />
                    </span>
                    {' '}
                    {badge.name}
                </div>
                <div className='badge-description'>
                    <span className='badge-label'>
                        <FormattedMessage
                            id='badges.label.description'
                            defaultMessage='Описание:'
                        />
                    </span>
                    {' '}
                    {badge.description ? markdown(badge.description) : '-'}
                </div>
                <div className='badge-meta'>
                    <FormattedMessage
                        id='badges.label.type'
                        defaultMessage='Тип: {typeName}'
                        values={{typeName: badge.type_name}}
                    />
                    {' · '}
                    {getGrantedText(badge)}
                </div>
            </div>
        </div>
    );
};

export default AllBadgesRow;