import React from 'react';
import { Box, Tag, Modal, ButtonGroup, Button } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';

import { useTranslation } from '../../../../client/contexts/TranslationContext';
import { useSetting } from '../../../../client/contexts/SettingsContext';
import Emoji from '../../../../client/components/Emoji';
import ScrollableContentWrapper from '../../../../client/components/ScrollableContentWrapper';
import { openUserCard } from '../../../ui/client/lib/UserCard';

export function Reactions({ reactions, onClick }) {
	const useRealName = useSetting('UI_Use_Real_Name');
	return <ScrollableContentWrapper>
		<Box>
			{Object.entries(reactions).map(([reaction, { names = [], usernames }]) => <Box key={reaction}>
				<Box display='flex' flexWrap='wrap' overflowX='hidden' mb='x8'>
					<Emoji emojiHandle={reaction} />
					<Box paddingBlock='x4' mis='x4'>
						{usernames.map((username, i) => <Username
							key={username}
							displayName={useRealName ? names[i] || username : username}
							username={username}
							onClick={onClick}
						/>)}
					</Box>
				</Box>
			</Box>)}
		</Box>
	</ScrollableContentWrapper>;
}

export function Username({ username, onClick, displayName }) {
	return (
		<Box marginInlineEnd='x4' data-username={username} onClick={onClick} key={displayName}>
			<Tag>{displayName}</Tag>
		</Box>
	);
}

export default function ReactionListContent({ rid, reactions, tabBar, onClose }) {
	const t = useTranslation();
	const onClick = useMutableCallback((e) => {
		const { username } = e.currentTarget.dataset;
		if (!username) {
			return;
		}
		openUserCard({
			username,
			rid,
			target: e.currentTarget,
			open: (e) => {
				e.preventDefault();
				onClose();
				tabBar.openUserInfo(username);
			},
		});
	});

	return <>
		<Modal.Header>
			<Modal.Title>{t('Users_reacted')}</Modal.Title>
			<Modal.Close onClick={onClose}/>
		</Modal.Header>
		<Modal.Content fontScale='p1'>
			<Reactions reactions={reactions} onClick={onClick} onClose={onClose}/>
		</Modal.Content>
		<Modal.Footer>
			<ButtonGroup align='end'>
				<Button primary onClick={onClose}>{t('Ok')}</Button>
			</ButtonGroup>
		</Modal.Footer>
	</>;
}