import type { ReactNode } from 'react';

import type { Gif } from '#/lib/gif';

import { GifAltTextDialog } from '#/features/composer/GifAltTextDialog';

import * as Dialog from '#/components/Dialog';
import { Text } from '#/components/Text';
import { Admonition } from '#/components/web/Admonition';

import Check from '#/icons/central/Checkmark2_round_outlined_radius1_stroke2.svg';
import Plus from '#/icons/central/PlusSmall_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

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

type Props = {
	altText: string;
	gif: Gif;
	onSubmit: (alt: string) => void;
};

export function GifAltText({ altText, gif, onSubmit }: Props): ReactNode {
	const handle = Dialog.useDialogHandle();

	return (
		<>
			<Dialog.Trigger
				aria-label={m['view.composer.altText.action.add']()}
				handle={handle}
				className={styles.badge}
			>
				{altText ? <Check className={styles.checkIcon} /> : <Plus className={styles.plusIcon} />}
				<Text weight="semiBold" selectable={false}>
					{m['common.altText.badge']()}
				</Text>
			</Dialog.Trigger>
			<Admonition type="info" className={styles.admonition}>
				{m['view.composer.altText.hint']()}
			</Admonition>
			<GifAltTextDialog altText={altText} gif={gif} handle={handle} onSubmit={onSubmit} />
		</>
	);
}