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

import {
	TextControl,
	ToggleControl,
	__experimentalVStack as VStack,
} from '@wordpress/components'

import {
	Dropdown as SkaDropdown,
} from '../../../../tailwind/inspector-controls'

import type {
	TextControlProps,
} from '@wordpress/components/build-types/text-control/types'

const noop = () => {}

export interface TogglePickerProps extends Omit<TextControlProps, 'value' | 'onChange'> {
	value: string
	fallbackValue: string
	enabled: boolean
	onChange: (nextValue: string) => void
	onFallbackChange: (nextValue: string) => void
	onToggle: () => void
}

const TogglePicker: React.FC<TogglePickerProps> = ({
	value = '',
	fallbackValue = '',
	enabled,
	onChange,
	onFallbackChange,
	onToggle,
	...textControlProps
}) => {
	return (
		<SkaDropdown
			renderContent={() => (
				<VStack className='ska-blocks--use-code-inputs'>
					<TextControl
						label={__('Enabled value', 'ska-blocks')}
						placeholder={_x('Value…', 'record-editor', 'ska-blocks')}
						value={value}
						onChange={onChange}
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					/>
					<TextControl
						label={__('Disabled value', 'ska-blocks')}
						placeholder={_x('Value…', 'record-editor', 'ska-blocks')}
						value={fallbackValue}
						onChange={onFallbackChange}
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					/>
				</VStack>
			)}
			renderToggle={({isOpen, onToggle: onDropdownToggle}) => (
				<div className='ska-blocks__variable-value-control__toggle'>
					<TextControl
						value={`${value || ''}/${fallbackValue || ''}`}
						onChange={noop}
						onFocus={onDropdownToggle}
						__nextHasNoMarginBottom
						__next40pxDefaultSize
						{...textControlProps}
					/>
					<ToggleControl
						label=''
						aria-label={__('Toggle variable', 'ska-blocks')}
						aria-checked={enabled}
						checked={enabled}
						onChange={onToggle}
						__nextHasNoMarginBottom
					/>
				</div>
			)}
		/>
	)
}

export default TogglePicker