import React from 'react';

import {useIntl} from 'react-intl';

import {UserBadge} from 'types/badges';

import {truncateText} from 'components/utils/badge_list_utils';

type Props = {
    badge: UserBadge;
    count: number;
}

const BadgeTooltip: React.FC<Props> = ({badge, count}) => {
    const intl = useIntl();
    const desc = badge.description ? truncateText(badge.description) : '—';

    const nameRow = intl.formatMessage(
        {id: 'badges.label.name', defaultMessage: 'Название:'},
    ) + ' ' + badge.name;

    const descRow = intl.formatMessage(
        {id: 'badges.label.description', defaultMessage: 'Описание:'},
    ) + ' ' + desc;

    if (count > 1) {
        const countRow = intl.formatMessage(
            {id: 'badges.label.count', defaultMessage: 'Количество: {count}'},
            {count},
        );
        return <>{nameRow}{'\n'}{descRow}{'\n'}{countRow}</>;
    }

    const time = new Date(badge.time);
    const grantedBy = intl.formatMessage(
        {id: 'badges.label.granted_by', defaultMessage: 'Выдал: {username}'},
        {username: badge.granted_by_name},
    );
    const grantedAt = intl.formatMessage(
        {id: 'badges.label.granted_at', defaultMessage: 'Выдан: {date}'},
        {date: intl.formatDate(time, {day: '2-digit', month: '2-digit', year: 'numeric'})},
    );

    return (
        <>
            {nameRow}{'\n'}
            {descRow}{'\n'}
            {badge.reason && (
                <>
                    {intl.formatMessage(
                        {id: 'badges.label.reason', defaultMessage: 'Причина: {reason}'},
                        {reason: badge.reason},
                    )}{'\n'}
                </>
            )}
            {grantedBy}{'\n'}
            {grantedAt}
        </>
    );
};

export default BadgeTooltip;
