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

import {
	useQuery,
} from '@tanstack/react-query'

import {
	QueryClientProvider,
	fetchFonts,
} from '../api'

import {
	ArrayEditorStringsProvider,
} from './ArrayEditor'

import {
	FontControl as SkaFontControl,
	FontSourcesContext,
	FontControlProps,
	FontControlStringsContext,
	GoogleFont,
	VariableGoogleFont,
	FontControlStrings,
} from '@ska/components'

const FontSourcesQueryProvider: React.FC<{children: React.ReactNode}> = ({children}) => {

	const {
		data: googleFonts = [],
	} = useQuery({
		queryKey: ['fonts', 'google'],
		queryFn: () => fetchFonts('google'),
	})

	const {
		data: variableGoogleFonts = [],
	} = useQuery({
		queryKey: ['fonts', 'google/variable'],
		queryFn: () => fetchFonts('google/variable'),
	})

	return (
		<FontSourcesContext.Provider
			value={[
				{
					...GoogleFont,
					label: __('Google Fonts', 'ska-blocks'),
					fonts: googleFonts,
				},
				{
					...VariableGoogleFont,
					label: __('Variable Google Fonts', 'ska-blocks'),
					fonts: variableGoogleFonts,
				},
			]}
		>
			{children}
		</FontSourcesContext.Provider>
	)
}

export const FontSourcesProvider: React.FC<{children: React.ReactNode}> = ({children}) => {
	return (
		<QueryClientProvider>
			<FontSourcesQueryProvider>
				{children}
			</FontSourcesQueryProvider>
		</QueryClientProvider>
	)
}

const STRINGS: FontControlStrings = {
	editButtonText: _x('Edit', 'font-control', 'ska-blocks'),
	modalTitle: _x('Edit font', 'font-control', 'ska-blocks'),
	localFontsLabel: _x('Local fonts', 'font-control', 'ska-blocks'),
	noExternalFontMessage: _x('No external font', 'font-control', 'ska-blocks'),
	unknownFontSourceMessage: _x('Unknown font source: %s', 'font-control', 'ska-blocks'),
	externalFontSourceLabel: _x('External font source', 'font-control', 'ska-blocks'),
	selectFontLabel: _x('Select a font', 'font-control', 'ska-blocks'),
	variantsLabel: _x('Variants', 'font-control', 'ska-blocks'),
	minWghtLabel: _x('Minimum font-weight', 'font-control', 'ska-blocks'),
	maxWghtLabel: _x('Maximum font-weight', 'font-control', 'ska-blocks'),
}

export const FontControlStringsProvider: React.FC<{children: React.ReactNode}> = (props) => (
	<FontControlStringsContext.Provider value={STRINGS}>
		{props.children}
	</FontControlStringsContext.Provider>
)

const FontControl: React.FC<FontControlProps> = (props) => {
	return (
		<ArrayEditorStringsProvider>
			<FontControlStringsProvider>
				<FontSourcesProvider>
					<SkaFontControl {...props} />
				</FontSourcesProvider>
			</FontControlStringsProvider>
		</ArrayEditorStringsProvider>
	)
}

export default FontControl