import {
	useState,
	useEffect
} from '@wordpress/element';
import {
	TextControl,
	Flex,
	FlexItem,
	ColorPicker,
	Popover,
	Button,
	ColorPalette,
} from '@wordpress/components';

import { useControlSettingSet } from '../_hooks';

import { __, sprintf } from '@wordpress/i18n';

type Props = {
	value: string;
	title: string;
	description?: string;
	onChange: (value: string) => void;
};

export default function ApuraText({
	value,
	title,
	description,
	onChange,
}: Props) {

	const [ currentValue, setCurrentValue ] = useState<string|undefined>(value);

	useEffect(() => {
		if (currentValue !== value) {
			onChange(currentValue || '');
		}
	}, [currentValue]);


	return (
		<div className='apura-text-control'>
			<label className="customize-control-title">{title}</label>
			{description &&
				<p className='description customize-control-description'>{description}</p>
			}

			<TextControl
				__next40pxDefaultSize
				__nextHasNoMarginBottom
				value={currentValue || ''}
				onChange={(value) => setCurrentValue(value)}
				/>
		</div>
	);
}