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

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

import {
	TextControl,
	Button,
} from '@wordpress/components'

import {
	settings as settingsIcon,
} from '@wordpress/icons'

import ShortcodeSettingsModal from './ShortcodeSettingsModal'

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

import './style.scss'

export type ShortcodeValueControlProps = TextControlProps

const ShortcodeValueControl: React.FC<ShortcodeValueControlProps> = props => {

	const {
		value,
		onChange,
	} = props

	const [isOpen, setIsOpen] = useState(false)

	return <>
		<TextControl
			value={value}
			onChange={onChange}
			__next40pxDefaultSize
			__nextHasNoMarginBottom
		/>
		<Button
			className='ska-blocks__dynamic-shortcodes__value'
			variant='secondary'
			label={__('Settings', 'ska-blocks')}
			icon={settingsIcon}
			onClick={() => setIsOpen(!isOpen)}
			__next40pxDefaultSize
		/>
		{isOpen && <ShortcodeSettingsModal onRequestClose={() => setIsOpen(false)} />}
	</>
}

export default ShortcodeValueControl