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

import { clsx } from 'clsx';

import { parseAltFromGIFDescription } from '#/lib/gif-alt-text';
import { toNiceDomain } from '#/lib/links/nice-domain';
import { parseGifEmbedFromUrl } from '#/lib/media/gif-embed';

import { EmbedThumb } from '#/components/EmbedThumb';
import { GifEmbed } from '#/components/ExternalEmbed/GifEmbed';
import { useNavigationDisabled } from '#/components/NavigationDisabled';
import { Text } from '#/components/Text';

import Globe from '#/icons/central/Earth_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

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

export type ExternalEmbedProps = {
	link: AppBskyEmbedExternal.ViewExternal;
	onOpen?: () => void;
	hideAlt?: boolean;
	className?: string;
};

export function ExternalEmbed({ link, onOpen, hideAlt, className }: ExternalEmbedProps) {
	const navigationDisabled = useNavigationDisabled();

	const gifParams = parseGifEmbedFromUrl(link.uri);
	if (gifParams) {
		const parsedAlt = parseAltFromGIFDescription(link.description);
		return (
			<GifEmbed
				params={gifParams}
				thumb={link.thumb ?? null}
				altText={parsedAlt.alt}
				isPreferredAltText={parsedAlt.isPreferred}
				hideAlt={hideAlt}
				className={className}
			/>
		);
	}

	const niceUrl = toNiceDomain(link.uri);

	const anchorProps = navigationDisabled
		? undefined
		: {
				'aria-label': link.title || m['common.a11y.openLink']({ niceUrl }),
				href: link.uri,
				onClick: onOpen,
				rel: 'noopener noreferrer',
				target: '_blank',
			};

	return (
		<a className={clsx(styles.card({ interactive: !navigationDisabled }), className)} {...anchorProps}>
			{link.thumb ? <EmbedThumb src={link.thumb} /> : null}
			<div className={clsx(styles.body, link.thumb && styles.bodyWithMedia)}>
				<div className={styles.titleBlock}>
					<Text size="md" weight="semiBold" numberOfLines={3}>
						{link.title || link.uri}
					</Text>
					{link.description ? (
						<Text size="md_sub" numberOfLines={link.thumb ? 2 : 4}>
							{link.description}
						</Text>
					) : null}
				</div>
				<div className={styles.domainWrap}>
					<div className={styles.divider} />
					<div className={styles.domainRow}>
						<Globe className={styles.globe} />
						<Text size="xs" numberOfLines={1} className={styles.domain}>
							{niceUrl}
						</Text>
					</div>
				</div>
			</div>
		</a>
	);
}