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

import Toggle from './Toggle'
import Color from './Color'
import FontSize from './FontSize'
import Pills from './Pills'

export {default as Opacity} from './Opacity'
export type {OpacityProps} from './Opacity'

import type {
	Attribute,
	SkaBlocksActionTypes,
	TailwindFeature,
	TailwindFeatureAttribute,
	TailwindFeatureOption,
	TailwindFeatureSchemaItem,
	TailwindFeatureVariants,
} from '../../../types'

export interface ControlsProps {
	type: TailwindFeatureOption['type']
	label: TailwindFeatureSchemaItem['label'] | TailwindFeatureOption['label']
	controls: TailwindFeatureSchemaItem['options']
	supports: TailwindFeature['supports']
	variant: keyof TailwindFeatureVariants
	valueKey: TailwindFeatureSchemaItem['key']
	value: TailwindFeatureVariants['value']['value']
	arbitraryValues: TailwindFeatureAttribute[Attribute.ARBITRARY_VALUES]
	dispatch: SkaBlocksActionTypes
}

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface ControlProps extends Omit<ControlsProps, 'type'> {}

const Controls: React.FC<ControlsProps> = ({type, ...props}) => {

	switch(type) {
		case 'toggle':
			return <Toggle {...props} />
		case 'color':
			return <Color {...props} />
		case 'font-size':
			return <FontSize {...props} />
		default:
			return <Pills {...props} />
	}
}

export default Controls