import React from 'react';

import {FormattedMessage, useIntl} from 'react-intl';

import {BadgeTypeDefinition} from 'types/badges';
import TrashIcon from 'components/icons/trash_icon';
import ConfirmDialog from 'components/confirm_dialog/confirm_dialog';

const NEW_TYPE_VALUE = '__new__';

type Props = {
    types: BadgeTypeDefinition[];
    badgeType: string;
    showCreateType: boolean;
    canCreateType: boolean;
    typeDropdownOpen: boolean;
    confirmDeleteTypeId: string | null;
    onToggleDropdown: () => void;
    onSelect: (val: string) => void;
    onDeleteType: (typeId: string) => void;
    onCancelDeleteType: () => void;
}

const TypeSelect: React.FC<Props> = ({
    types,
    badgeType,
    showCreateType,
    canCreateType,
    typeDropdownOpen,
    confirmDeleteTypeId,
    onToggleDropdown,
    onSelect,
    onDeleteType,
    onCancelDeleteType,
}) => {
    const intl = useIntl();

    const selectedTypeName = types.find((t) => String(t.id) === badgeType)?.name ||
        intl.formatMessage({id: 'badges.modal.field_type_placeholder', defaultMessage: 'Выберите тип достижения'});
    const triggerLabel = showCreateType ? intl.formatMessage({id: 'badges.modal.create_new_type', defaultMessage: '+ Создать новый тип'}) : selectedTypeName;
    const confirmType = confirmDeleteTypeId ? types.find((t) => String(t.id) === confirmDeleteTypeId) : null;

    return (
        <div className='type-select'>
            <button
                type='button'
                className='type-select__trigger'
                onClick={onToggleDropdown}
            >
                <span className='type-select__value'>{triggerLabel}</span>
                <span className='type-select__arrow'>{'\u25BE'}</span>
            </button>
            {typeDropdownOpen && (
                <div className='type-select__dropdown'>
                    {types.map((t) => {
                        const tid = String(t.id);
                        const isEmpty = t.badge_count === 0;
                        return (
                            <div
                                key={tid}
                                className={'type-select__option' + (tid === badgeType ? ' type-select__option--selected' : '')}
                            >
                                <span
                                    className='type-select__option-name'
                                    onClick={() => onSelect(tid)}
                                >
                                    {t.name}
                                </span>
                                {isEmpty && !t.is_default && (
                                    <button
                                        type='button'
                                        className='type-select__delete-btn'
                                        onClick={() => onDeleteType(tid)}
                                        title={intl.formatMessage({id: 'badges.modal.delete_type', defaultMessage: 'Удалить тип'})}
                                    >
                                        <TrashIcon/>
                                    </button>
                                )}
                            </div>
                        );
                    })}
                    {canCreateType && (
                        <div
                            className='type-select__option type-select__option--create'
                            onClick={() => onSelect(NEW_TYPE_VALUE)}
                        >
                            <span className='type-select__option-name'>
                                {intl.formatMessage({id: 'badges.modal.create_new_type', defaultMessage: '+ Создать новый тип'})}
                            </span>
                        </div>
                    )}
                </div>
            )}
            {confirmType && (
                <ConfirmDialog
                    onConfirm={() => onDeleteType(String(confirmDeleteTypeId))}
                    onCancel={onCancelDeleteType}
                >
                    <FormattedMessage
                        id='badges.modal.confirm_delete_type'
                        defaultMessage='Удалить тип «{name}»?'
                        values={{name: confirmType.name}}
                    />
                </ConfirmDialog>
            )}
        </div>
    );
};

export default TypeSelect;
