text: import { Field, Flex, Box, MultiSelectFiltered, MultiSelect } from '@rocket.chat/fuselage';
  import React from 'react';
  
  import { useTranslation } from '../../../../../../client/contexts/TranslationContext';
  import { ResetSettingButton } from '../ResetSettingButton';
  
  export function MultiSelectSettingInput({
  	_id,
  	label,
  	value = [],
  	placeholder,
  	readonly,
  	disabled,
  	values = [],
  	hasResetButton,
  	onChangeValue,
  	onResetButtonClick,
  	autocomplete,
  }) {
  	const t = useTranslation();
  
  	const handleChange = (value) => {
  		onChangeValue && onChangeValue(value);
  		// onChangeValue && onChangeValue([...event.currentTarget.querySelectorAll('option')].filter((e) => e.selected).map((el) => el.value));
  	};
  	const Component = autocomplete ? MultiSelectFiltered : MultiSelect;
  	return (
  		<>
  			<Flex.Container>
  				<Box>
  					<Field.Label htmlFor={_id} title={_id}>
  						{label}
  					</Field.Label>
  					{hasResetButton && (
  						<ResetSettingButton
  							data-qa-reset-setting-id={_id}
  							onClick={onResetButtonClick}
  						/>
  					)}
  				</Box>
  			</Flex.Container>
  			<Component
  				data-qa-setting-id={_id}
  				id={_id}
  				value={value}
  				placeholder={placeholder}
  				disabled={disabled}
  				readOnly={readonly}
  				// autoComplete={autocomplete === false ? 'off' : undefined}
  				onChange={handleChange}
  				options={values.map(({ key, i18nLabel }) => [
  					key,
  					t(i18nLabel),
  				])}
  			/>
  		</>
  	);
  }
  
  export default MultiSelectSettingInput;
  