import type { ReactNode } from 'react';

import type { ChatBskyEmbedJoinLink } from '@atcute/bluesky';
import type { $type } from '@atcute/lexicons';

import { clsx } from 'clsx';

import { useConvoActive } from '#/state/messages/convo';

import * as ChatInvite from '#/components/dms/ChatInvite';

import { MessageContextProvider } from './MessageContext';
import * as css from './MessageItemInviteEmbed.css';

function MessageItemInviteEmbed({
	embed,
	isFromSelf,
	squaredTopCorner,
	squaredBottomCorner,
}: {
	embed: $type.enforce<ChatBskyEmbedJoinLink.View>;
	isFromSelf: boolean;
	squaredTopCorner: boolean;
	squaredBottomCorner: boolean;
}): ReactNode {
	const convo = useConvoActive();
	const { status, preview, action } = ChatInvite.useChatInvite({
		code: embed.joinLinkPreview.code,
		initialPreview: embed.joinLinkPreview,
		currentConvoId: convo.convo.view.id,
	});

	return (
		<MessageContextProvider>
			<div className={css.outer}>
				<div
					className={clsx(
						css.inner({ fromSelf: isFromSelf }),
						css.bubbleCorners({
							fromSelf: isFromSelf,
							squaredBottom: squaredBottomCorner,
							squaredTop: squaredTopCorner,
						}),
					)}
				>
					<MessageItemInviteEmbedBody action={action} preview={preview} status={status} />
				</div>
			</div>
		</MessageContextProvider>
	);
}
export { MessageItemInviteEmbed };

function MessageItemInviteEmbedBody({
	status,
	preview,
	action,
}: {
	status: ChatInvite.ChatInviteStatus;
	preview: ChatInvite.ChatInvitePreview | undefined;
	action: ChatInvite.ChatInviteAction | undefined;
}) {
	if (status === 'loading') {
		return <ChatInvite.Loading className={css.loadingPad} />;
	}

	if (status !== 'available') {
		return <ChatInvite.Unavailable className={css.errorPad} />;
	}

	return (
		<>
			<ChatInvite.Card preview={preview} />
			<ChatInvite.JoinButton action={action} />
		</>
	);
}