import type { ChatBskyActorDefs } from '@atcute/bluesky';

import { profileTarget } from '#/lib/routes/targets';

import type { ConvoItem } from '#/state/messages/convo/types';

import { useInviteLinkDialog } from '#/screens/Messages/components/InviteLinkDialogProvider';

import * as Dialog from '#/components/Dialog';
import { getSystemMessageInfo } from '#/components/dms/getSystemMessageInfo';
import { Text } from '#/components/Text';
import { Link } from '#/components/web/Link';

import * as css from './SystemMessageItem.css';

export function SystemMessageItem({
	item,
	relatedProfiles,
}: {
	item: ConvoItem & { type: 'systemMessage' };
	relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>;
}) {
	const inviteLinkHandle = useInviteLinkDialog();

	const info = getSystemMessageInfo(item.message.data, relatedProfiles);
	if (!info) {
		return null;
	}

	const { Icon, action } = info;
	const text = info.message;

	const row = (
		<div className={css.row}>
			<Icon className={css.icon} />
			<Text align="center" color="textContrastMedium" size="xs">
				{text}
			</Text>
		</div>
	);

	switch (action?.kind) {
		case 'profile': {
			return (
				<Link className={css.link} label={text} to={profileTarget(action.profile.did)}>
					{row}
				</Link>
			);
		}
		case 'inviteLink': {
			if (!inviteLinkHandle) {
				return row;
			}
			return (
				<Dialog.Trigger aria-label={text} className={css.button} handle={inviteLinkHandle} type="button">
					{row}
				</Dialog.Trigger>
			);
		}
		default: {
			return row;
		}
	}
}