import { FontSizePicker, SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

// This file ignores types as they are outdated from the source

export const FontSizeSelect = ({
	value,
	onChange,
}: {
	value: string;
	onChange: (v: string | undefined) => void;
}) => {
	return (
		<FontSizePicker
			onChange={(size) => {
				// @ts-expect-error-next-line
				onChange(size ?? '.875rem');
			}}
			// @ts-expect-error-next-line
			value={value}
			fontSizes={[
				{
					name: 'Tiny',
					// @ts-expect-error-next-line
					size: '.75rem',
					slug: 'tiny',
				},
				{
					name: 'Small',
					// @ts-expect-error-next-line
					size: '.875rem',
					slug: 'small',
				},
				{
					name: 'Normal',
					// @ts-expect-error-next-line
					size: '1rem',
					slug: 'normal',
				},
				{
					name: 'Big',
					// @ts-expect-error-next-line
					size: '1.125rem',
					slug: 'big',
				},
			]}
		/>
	);
};

export const FontLineHeightSelect = ({
	value,
	onChange,
}: {
	value: string;
	onChange: (v: string | undefined) => void;
}) => {
	return (
		<FontSizePicker
			onChange={(size) => {
				// @ts-expect-error-next-line
				onChange(size ?? '.875rem');
			}}
			// @ts-expect-error-next-line
			value={value}
			fontSizes={[
				{
					name: 'None',
					// @ts-expect-error-next-line
					size: '1rem',
					slug: 'none',
				},
				{
					name: 'Tight',
					// @ts-expect-error-next-line
					size: '1.25rem',
					slug: 'tight',
				},
				{
					name: 'Normal',
					// @ts-expect-error-next-line
					size: '1.5rem',
					slug: 'normal',
				},
				{
					name: 'Relaxed',
					// @ts-expect-error-next-line
					size: '1.625rem',
					slug: 'relaxed',
				},
			]}
		/>
	);
};
export const FontFamilySelect = ({
	value,
	onChange,
}: {
	value: string;
	onChange: (v: string) => void;
}) => {
	const fonts = {
		'': __('System Default', 'code-block-pro'),
		'Code-Pro-Comic-Mono.ttf': 'Comic Mono',
		'Code-Pro-Cozette': 'Cozette',
		'Code-Pro-Deja-Vu-Mono.ttf': 'DejaVu Mono',
		'Code-Pro-Fantasque-Sans-Mono': 'Fantasque Sans Mono',
		'Code-Pro-Fira-Code': 'Fira Code',
		'Code-Pro-Geist-Mono': 'Geist Mono',
		'Code-Pro-Hack': 'Hack',
		'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
		'Code-Pro-JetBrains-Mono-NL.ttf': 'JetBrains Mono (No Ligatures)',
		'Code-Pro-Monaspace-Argon.woff': 'Monaspace Argon',
		'Code-Pro-Monaspace-Krypton.woff': 'Monaspace Krypton',
		'Code-Pro-Monaspace-Neon.woff': 'Monaspace Neon',
		'Code-Pro-Monaspace-Radon.woff': 'Monaspace Radon',
		'Code-Pro-Monaspace-Xenon.woff': 'Monaspace Xenon',
		'Code-Pro-Roboto-Mono.ttf': 'Roboto Mono',
	};
	return (
		<SelectControl
			id="code-block-pro-font-family"
			label={__('Font Family', 'code-block-pro')}
			value={value}
			onChange={onChange}
			options={Object.entries(fonts).map(([value, label]) => ({
				label,
				value,
			}))}
		/>
	);
};