text: import React, { useEffect } from 'react';
  import { Box, Button, ButtonGroup, Icon } from '@rocket.chat/fuselage';
  import { css } from '@rocket.chat/css-in-js';
  import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
  
  import RoomAvatar from './RoomAvatar';
  import { useFileInput } from '../../../hooks/useFileInput';
  import { useTranslation } from '../../../contexts/TranslationContext';
  import { getAvatarURL } from '../../../../app/utils/lib/getAvatarURL';
  
  const RoomAvatarEditor = ({ room, roomAvatar, onChangeAvatar = () => {}, ...props }) => {
  	const t = useTranslation();
  
  	const handleChangeAvatar = useMutableCallback((file) => {
  		const reader = new FileReader();
  		reader.readAsDataURL(file);
  		reader.onloadend = () => {
  			onChangeAvatar(reader.result);
  		};
  	});
  
  	const [clickUpload, reset] = useFileInput(handleChangeAvatar);
  	const clickReset = useMutableCallback(() => {
  		reset();
  		onChangeAvatar(null);
  	});
  
  	useEffect(() => {
  		!roomAvatar && reset();
  	}, [roomAvatar, reset]);
  
  	const defaultUrl = room.prid ? getAvatarURL({ roomId: room.prid }) : getAvatarURL({ username: `@${ room.name }` }); // Discussions inherit avatars from the parent room
  
  	return <Box borderRadius='x2' maxWidth='x332' w='full' position='relative' {...props}>
  		<RoomAvatar { ...roomAvatar !== undefined && { url: roomAvatar === null ? defaultUrl : roomAvatar } } room={room} size='x332' />
  		<Box className={[css`bottom: 0; right: 0;`]} position='absolute' m='x12'>
  			<ButtonGroup>
  				<Button small title={t('Upload_user_avatar')} onClick={clickUpload}>
  					<Icon name='upload' size='x16' />
  					{t('Upload')}
  				</Button>
  
  				<Button primary small danger title={t('Accounts_SetDefaultAvatar')} disabled={roomAvatar === null } onClick={clickReset}>
  					<Icon name='trash' size='x16' />
  				</Button>
  			</ButtonGroup>
  		</Box>
  	</Box>;
  };
  
  export default RoomAvatarEditor;
  