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

import {
	BaseControl,
} from '@wordpress/components'

import {
	ModelPicker,
} from '@ska/ai'

import {
	type OptionsControls,
} from '@ska/plugin'

import DynamicLinksControl from './dynamic-links'
import DynamicShortcodesControl from './dynamic-shortcodes'

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

import type {
	PluginOptions,
} from '../options'

const controls: OptionsControls<PluginOptions, any> = {

	/** Control that allows to edit dynamic links and their options. */
	'dynamic-links': props => <DynamicLinksControl {...props} />,

	/** Control that allows to edit dynamic shortcodes and their options. */
	'dynamic-shortcodes': props => <DynamicShortcodesControl {...props} />,

	/** OpenRouter AI model picker. */
	'model-picker': props => {

		const {
			id,
			label,
			description = '',
			value,
			onChange,
		} = props

		return (
			<BaseControl
				id={id}
				label={label}
				help={description}
				__nextHasNoMarginBottom
			>
				<ModelPicker
					showFilters={id === 'openRouterModel'}
					value={value}
					onChange={onChange}
					QueryClientProvider={QueryClientProvider}
				/>
			</BaseControl>
		)
	},
}

export default controls