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 DynamicLinkSettingsModal from './DynamicLinkSettingsModal'

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

import './style.scss'

export type DynamicLinkControlProps = TextControlProps

const DynamicLinkControl: React.FC<DynamicLinkControlProps> = props => {

	const {
		value,
		onChange,
	} = props

	const [isOpen, setIsOpen] = useState(false)

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

export default DynamicLinkControl