import React from 'react';

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

import {TypeFormData} from 'types/badges';
import UserMultiSelect from 'components/user_multi_select';

type Props = {
    form: TypeFormData;
    onChange: (updates: Partial<TypeFormData>) => void;
}

const InlineTypeForm: React.FC<Props> = ({form, onChange}) => {
    const intl = useIntl();

    return (
        <div className='inline-type-section'>
            <div className='form-group'>
                <label>
                    <FormattedMessage
                        id='badges.modal.new_type_name'
                        defaultMessage='Название типа'
                    />
                    <span className='required'>{'*'}</span>
                </label>
                <input
                    type='text'
                    value={form.name}
                    onChange={(e) => onChange({name: e.target.value})}
                    maxLength={20}
                    placeholder={intl.formatMessage({id: 'badges.modal.new_type_name_placeholder', defaultMessage: 'Название типа (макс. 20 символов)'})}
                />
            </div>
            <div className='checkbox-group'>
                <input
                    type='checkbox'
                    id='newTypeEveryoneCanCreate'
                    checked={form.everyoneCanCreate}
                    onChange={(e) => onChange({everyoneCanCreate: e.target.checked})}
                />
                <label htmlFor='newTypeEveryoneCanCreate'>
                    <FormattedMessage
                        id='badges.modal.new_type_everyone_create'
                        defaultMessage='Все могут создавать достижения'
                    />
                </label>
            </div>
            {!form.everyoneCanCreate && (
                <div className='form-group'>
                    <label>
                        <FormattedMessage
                            id='badges.modal.allowlist_create'
                            defaultMessage='Список допущенных к созданию'
                        />
                    </label>
                    <UserMultiSelect
                        value={form.allowlistCanCreate}
                        onChange={(v) => onChange({allowlistCanCreate: v})}
                    />
                </div>
            )}
            <div className='checkbox-group'>
                <input
                    type='checkbox'
                    id='newTypeEveryoneCanGrant'
                    checked={form.everyoneCanGrant}
                    onChange={(e) => onChange({everyoneCanGrant: e.target.checked})}
                />
                <label htmlFor='newTypeEveryoneCanGrant'>
                    <FormattedMessage
                        id='badges.modal.new_type_everyone_grant'
                        defaultMessage='Все могут выдавать достижения'
                    />
                </label>
            </div>
            {!form.everyoneCanGrant && (
                <div className='form-group'>
                    <label>
                        <FormattedMessage
                            id='badges.modal.allowlist_grant'
                            defaultMessage='Список допущенных к выдаче'
                        />
                    </label>
                    <UserMultiSelect
                        value={form.allowlistCanGrant}
                        onChange={(v) => onChange({allowlistCanGrant: v})}
                    />
                </div>
            )}
        </div>
    );
};

export default InlineTypeForm;
