import React, {useState} from 'react';

import {FormattedMessage} from 'react-intl';

import {BadgeTypeDefinition} from '../../types/badges';
import ConfirmDialog from '../confirm_dialog/confirm_dialog';

import './all_types_row.scss';

type Props = {
    badgeType: BadgeTypeDefinition;
    onEdit: (badgeType: BadgeTypeDefinition) => void;
    onDelete: (badgeType: BadgeTypeDefinition) => void;
    onClick: (badgeType: BadgeTypeDefinition) => void;
}

const AllTypesRow: React.FC<Props> = ({badgeType, onEdit, onDelete, onClick}: Props) => {
    const [confirmDelete, setConfirmDelete] = useState(false);

    const handleDelete = () => {
        if (!confirmDelete) {
            setConfirmDelete(true);
            return;
        }
        onDelete(badgeType);
    };

    return (
        <div
            className='AllTypesRow'
            onClick={() => onClick(badgeType)}
        >
            <div className='AllTypesRow__info'>
                <div className='AllTypesRow__name'>
                    {badgeType.name}
                    {badgeType.is_default && (
                        <span className='AllTypesRow__default'>
                            <FormattedMessage
                                id='badges.types.is_default'
                                defaultMessage='По умолчанию'
                            />
                        </span>
                    )}
                </div>
                <div className='AllTypesRow__meta'>
                    <FormattedMessage
                        id='badges.label.created_by'
                        defaultMessage='Создал: {username}'
                        values={{username: badgeType.created_by_username || badgeType.created_by}}
                    />
                    {' · '}
                    <FormattedMessage
                        id='badges.types.badge_count'
                        defaultMessage='{count, plural, one {# достижение} few {# достижения} many {# достижений} other {# достижений}}'
                        values={{count: badgeType.badge_count}}
                    />
                    {badgeType.can_create?.everyone && (
                        <>
                            {' · '}
                            <FormattedMessage
                                id='badges.types.everyone_can_create'
                                defaultMessage='Все создают'
                            />
                        </>
                    )}
                    {badgeType.can_grant?.everyone && (
                        <>
                            {' · '}
                            <FormattedMessage
                                id='badges.types.everyone_can_grant'
                                defaultMessage='Все выдают'
                            />
                        </>
                    )}
                </div>
            </div>
            <div
                className='AllTypesRow__actions'
                onClick={(e) => e.stopPropagation()}
            >
                <button
                    className='AllTypesRow__btn AllTypesRow__btn--edit'
                    onClick={() => onEdit(badgeType)}
                >
                    <FormattedMessage
                        id='badges.rhs.edit_badge'
                        defaultMessage='Редактировать'
                    />
                </button>
                {!badgeType.is_default && (
                    <button
                        className='AllTypesRow__btn AllTypesRow__btn--danger'
                        onClick={handleDelete}
                    >
                        <FormattedMessage
                            id='badges.modal.delete_type'
                            defaultMessage='Удалить'
                        />
                    </button>
                )}
                {confirmDelete && (
                    <ConfirmDialog
                        onConfirm={() => onDelete(badgeType)}
                        onCancel={() => setConfirmDelete(false)}
                    >
                        <FormattedMessage
                            id='badges.modal.confirm_delete_type'
                            defaultMessage='Удалить тип «{name}»?'
                            values={{name: badgeType.name}}
                        />
                    </ConfirmDialog>
                )}
            </div>
        </div>
    );
};

export default AllTypesRow;
