/**
 * WordPress dependencies
 */
import { useContext, useId } from '@wordpress/element';
import { CheckboxControl, Flex } from '@wordpress/components';
import type { FontFace, FontFamily } from '@wordpress/core-data';

/**
 * Internal dependencies
 */
import { getFontFaceVariantName } from './utils';
import { FontLibraryContext } from './context';
import FontDemo from './font-demo';

function LibraryFontVariant( {
	face,
	font,
}: {
	face: FontFace;
	font: FontFamily;
} ) {
	const { isFontActivated, toggleActivateFont } =
		useContext( FontLibraryContext );

	const isInstalled =
		( font?.fontFace?.length ?? 0 ) > 0
			? isFontActivated(
					font.slug,
					face.fontStyle,
					face.fontWeight,
					font.source
			  )
			: isFontActivated( font.slug, undefined, undefined, font.source );

	const handleToggleActivation = () => {
		if ( ( font?.fontFace?.length ?? 0 ) > 0 ) {
			toggleActivateFont( font, face );
			return;
		}
		toggleActivateFont( font );
	};

	const displayName = font.name + ' ' + getFontFaceVariantName( face );
	const checkboxId = useId();

	return (
		<div className="font-library__font-card">
			<Flex justify="flex-start" align="center" gap="1rem">
				<CheckboxControl
					checked={ isInstalled }
					onChange={ handleToggleActivation }
					id={ checkboxId }
				/>
				<label htmlFor={ checkboxId }>
					<FontDemo
						font={ face }
						text={ displayName }
						onClick={ handleToggleActivation }
					/>
				</label>
			</Flex>
		</div>
	);
}

export default LibraryFontVariant;