import * as React from 'react'
import {__, _x} from '@wordpress/i18n'

import {
	useContext,
} from '@wordpress/element'

import {
	ButtonGroup,
	FontControlStringsContext,
	type FontControlsProps,
	type FontSource,
} from '@ska/components'

interface GoogleFont {
	name: string
	variants: string[]
}

export interface GoogleFontControlsProps extends Omit<FontControlsProps, 'font'> {
	font: GoogleFont
}

const Controls: React.FC<GoogleFontControlsProps> = ({
	font,
	value,
	onChange,
}) => {

	const {
		variantsLabel,
	} = useContext(FontControlStringsContext)

	const {
		variants = [],
	} = font

	const {
		variants: currentVariants = [],
	} = value

	return <>
		{variants.length > 0 && (
			<ButtonGroup
				pills
				isSmall
				label={variantsLabel}
				options={variants.map(variant => ({
					label: variant,
					value: variant,
				}))}
				value={currentVariants}
				onChange={nextVariants => {
					onChange({
						...value,
						variants: [
							...nextVariants,
						],
					})
				}}
			/>
		)}
	</>
}

const Source: FontSource = {
	id: 'googleFonts',
	label: __('Google Font', 'ska-components'),
	fonts: [],
	renderControls: Controls,
}

export default Source