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

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

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

import {
	TailwindFeatureContext,
} from '..'

import type {
	ControlProps,
} from '.'

const Toggle: React.FC<ControlProps> = ({
	label,
	variant,
	valueKey,
	value,
	dispatch,
}) => {

	const {
		id,
	} = useContext(TailwindFeatureContext)

	return (
		<ToggleControl
			label={label}
			checked={value === 'DEFAULT'}
			onChange={() => {
				dispatch.setVariantValue({
					feature: id,
					variant,
					key: valueKey,
					value: value === 'DEFAULT' ? '' : 'DEFAULT',
				})
			}}
			__nextHasNoMarginBottom
		/>
	)
}

export default Toggle