/* eslint-disable react/prop-types */
import React, {useCallback} from 'react';
import {FormattedMessage, useIntl} from 'react-intl';

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 intl = useIntl();

    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        onChange(id, e.target.value);
        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'>
                <input
                    className='form-control'
                    type='text'
                    value={value || ''}
                    disabled={disabled}
                    onChange={handleChange}
                    placeholder={intl.formatMessage({
                        id: 'badges.admin.placeholder',
                        defaultMessage: 'username',
                    })}
                />
                <div className='help-text'>
                    <FormattedMessage
                        id='badges.admin.help_text'
                        defaultMessage='Этот пользователь будет считаться администратором плагина достижений. Он может создавать типы, а также изменять и выдавать любые значки.'
                    />
                </div>
            </div>
        </div>
    );
};

export default BadgesAdminSetting;