import React, {useCallback} from 'react';
import {FormattedMessage} from 'react-intl';

import UserMultiSelect from 'components/user_multi_select';

type Props = {
    id: string;
    value: string;
    disabled: boolean;
    onChange: (id: string, value: any) => void;
    setSaveNeeded: () => void;
    config: any;
    license: any;
    setByEnv: boolean;
    registerSaveAction: (action: () => Promise<{error?: {message?: string}}>) => void;
    unRegisterSaveAction: (action: () => Promise<{error?: {message?: string}}>) => void;
}

const BadgesAdminSetting: React.FC<Props> = ({id, value, disabled, onChange, setSaveNeeded}) => {
    const handleChange = useCallback((newValue: string) => {
        onChange(id, newValue);
        setSaveNeeded();
    }, [id, onChange, setSaveNeeded]);

    return (
        <div className='form-group'>
            <label className='control-label col-sm-4'>
                <FormattedMessage
                    id='badges.admin.label'
                    defaultMessage='Администраторы достижений:'
                />
            </label>
            <div className='col-sm-8'>
                <UserMultiSelect
                    value={value}
                    onChange={handleChange}
                    disabled={disabled}
                />
                <div className='help-text'>
                    <FormattedMessage
                        id='badges.admin.help_text'
                        defaultMessage='Эти пользователи будут считаться администраторами плагина достижений. Они могут создавать типы, а также изменять и выдавать любые достижения.'
                    />
                </div>
            </div>
        </div>
    );
};

export default BadgesAdminSetting;
