import { ComboboxControl } from '@wordpress/components';

import { __ } from '@wordpress/i18n';


interface FontSelectProps {
	value: string | undefined;
	googleFonts?: GoogleFontItem[] | null;
	onChange: (selectedFont: string | null | undefined) => void;
}

/**
 * FontSelect Component
 *
 * A component that allows users to select a font from a list of Google and system fonts.
 * It utilizes a ComboboxControl for font selection.
 *
 * @param {FontSelectProps} props - The properties for the FontSelect component.
 * @returns {JSX.Element} The FontSelect component.
 */
export default function FontSelect({ value, googleFonts, onChange }: FontSelectProps) {
	// Mapping Google fonts to options for the ComboboxControl
	const googleFontOptions = googleFonts ? googleFonts.map(font => ({
		label: font.name,
		value: font.name
	})) : [];

	// Mapping system fonts to options for the ComboboxControl
	const systemFontOptions = apuraCustomizerControl?.systemFonts ? apuraCustomizerControl?.systemFonts?.map(font => ({
		label: font,
		value: font
	})) : [];

	// Combining all options for the ComboboxControl, including default and section headers
	const options = [
		{ label: __('Default'), value: '' },
		{ label: __('Inherit', 'apura'), value: 'inherit' },
		...(googleFonts?.length ? [{ disabled: true, label: __('Google Fonts', 'apura'), value: 'google fonts title' }, ...googleFontOptions] : []),
		{ disabled: true, label: __('System Fonts', 'apura'), value: 'system fonts title' },
		...systemFontOptions
	];

	// Rendering the ComboboxControl with the given options
	return (
		<ComboboxControl
			__next40pxDefaultSize
			__nextHasNoMarginBottom
			label='Font Family'
			onChange={onChange}
			options={options}
			allowReset={false}
			value={value ?? ''}
		/>
	);
}