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

import { getStarterPackOgCard } from '#/lib/starter-pack';

import * as Dialog from '#/components/Dialog';
import { EmbedThumb } from '#/components/EmbedThumb';
import { shareUrl } from '#/components/sharing';
import { Stack } from '#/components/Stack';
import { Text } from '#/components/Text';
import { Button, ButtonIcon, ButtonText } from '#/components/web/Button';

import ChainLinkIcon from '#/icons/central/ChainLink3_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

import * as styles from './ShareDialog.css';

type Props = {
	handle: Dialog.DialogHandle;
	link: string;
	starterPack: AppBskyGraphDefs.StarterPackView;
};

export function ShareDialog({ handle, ...props }: Props) {
	return (
		<Dialog.Root handle={handle}>
			<Dialog.Popup label={m['components.starterPack.share.a11yLabel']()}>
				<ShareDialogInner handle={handle} {...props} />
			</Dialog.Popup>
		</Dialog.Root>
	);
}

function ShareDialogInner({ handle, link, starterPack }: Props) {
	const imageUrl = getStarterPackOgCard(starterPack);

	const onShareLink = () => {
		void shareUrl(link);
		handle.close();
	};

	return (
		<Stack gap="xl">
			<Stack gap="xs">
				<Dialog.TitleRow>
					<Dialog.Title>{m['components.starterPack.share.invitePrompt']()}</Dialog.Title>
					<Dialog.Close />
				</Dialog.TitleRow>

				<Text color="textContrastMedium">{m['components.starterPack.share.message']()}</Text>
			</Stack>

			<EmbedThumb frameClassName={styles.card} src={imageUrl} />

			<Dialog.Actions align="center" direction="responsive">
				<Button
					color="primary_subtle"
					label={m['common.share.action.copyLink']()}
					onClick={onShareLink}
					size="large"
					variant="solid"
				>
					<ButtonIcon icon={ChainLinkIcon} />
					<ButtonText>{m['common.share.action.copyLink']()}</ButtonText>
				</Button>
			</Dialog.Actions>
		</Stack>
	);
}