import { cloneElement, type MouseEvent, type ReactElement } from 'react';

import { useSession } from '#/state/session';

import { useRequireAuth } from '#/components/hooks/use-require-auth';
import * as Menu from '#/components/Menu';
import { Tooltip } from '#/components/Tooltip';

import Repost from '#/icons/central/ArrowsRepeatRightLeft_round_outlined_radius1_stroke2.svg';
import Quote from '#/icons/central/CloseQuote2_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

export const RepostMenu = ({
	render,
	tooltip,
	isReposted,
	onRepost,
	onQuote,
	embeddingDisabled,
}: {
	render: ReactElement<{ onClick?: (e: MouseEvent<HTMLButtonElement>) => void }>;
	tooltip: string;
	isReposted: boolean;
	onRepost: () => void;
	onQuote: () => void;
	embeddingDisabled: boolean;
}) => {
	const { hasSession } = useSession();
	const requireAuth = useRequireAuth();

	// A menu trigger opens on pointerdown; opening the sign-in dialog there lets the trailing
	// pointerup/click register as an outside-press that immediately dismisses it. Signed-out viewers
	// don't need the menu, so wire the button as a plain click handler instead — the dialog then opens
	// at click time, past the pointer sequence that opened it.
	if (!hasSession) {
		return (
			<Tooltip label={tooltip}>{cloneElement(render, { onClick: () => requireAuth(() => {}) })}</Tooltip>
		);
	}

	return (
		<Menu.Root>
			<Tooltip label={tooltip}>
				<Menu.Trigger render={render} />
			</Tooltip>
			<Menu.Popup label={m['components.postControls.repost.a11y']()} align="center" minWidth={170}>
				<Menu.Item
					label={
						isReposted
							? m['components.postControls.repost.action.undo']()
							: m['components.postControls.repost.action.repost']()
					}
					onClick={onRepost}
				>
					<Menu.ItemText>
						{isReposted
							? m['components.postControls.repost.action.undo']()
							: m['components.postControls.repost.action.repost']()}
					</Menu.ItemText>
					<Menu.ItemIcon icon={Repost} position="right" />
				</Menu.Item>
				<Menu.Item
					disabled={embeddingDisabled}
					label={embeddingDisabled ? m['components.postControls.quote.disabled']() : m['common.quote.post']()}
					onClick={onQuote}
				>
					<Menu.ItemText>
						{embeddingDisabled ? m['components.postControls.quote.disabled']() : m['common.quote.post']()}
					</Menu.ItemText>
					<Menu.ItemIcon icon={Quote} position="right" />
				</Menu.Item>
			</Menu.Popup>
		</Menu.Root>
	);
};