import { UserStatus } from '@rocket.chat/core-typings';
import { Box, Icon } from '@rocket.chat/fuselage';
import { isTruthy } from '@rocket.chat/tools';
import { useTranslation } from 'react-i18next';

import { useExpirationText } from '../../hooks/useExpirationText';
import MarkdownText from '../MarkdownText';

const STATUS_LABEL_KEYS: Record<UserStatus, string> = {
	[UserStatus.ONLINE]: 'Online',
	[UserStatus.AWAY]: 'Away',
	[UserStatus.BUSY]: 'Busy',
	[UserStatus.OFFLINE]: 'Offline',
	[UserStatus.DISABLED]: 'Disabled',
};

export type UserStatusTextProps = {
	status?: UserStatus;
	statusText?: string;
	statusExpiresAt?: Date | string;
};

const UserStatusText = ({ status, statusText, statusExpiresAt }: UserStatusTextProps) => {
	const { t } = useTranslation();
	const expirationText = useExpirationText(statusExpiresAt);

	const statusLabel = status ? t(STATUS_LABEL_KEYS[status] ?? STATUS_LABEL_KEYS[UserStatus.OFFLINE]) : undefined;
	const headline = [statusLabel, statusText].filter(isTruthy).join(' - ');

	if (!headline && !expirationText) {
		return null;
	}

	return (
		<>
			{headline && <MarkdownText content={headline} parseEmoji={true} variant='inline' />}
			{expirationText && (
				<Box fontScale='c1' display='flex' alignItems='center'>
					<Icon name='clock' size='x16' marginInlineEnd={4} />
					{expirationText}
				</Box>
			)}
		</>
	);
};

export default UserStatusText;