import {useRef, useState} from '@wordpress/element';
import {ColorPicker, Popover, Button} from '@wordpress/components';
import FieldControl from '../components/FieldControl';

const ColorPickerField = ( {field, value, onChange} ) => {
	const [isVisible, setIsVisible] = useState( false );
	const colorValue = value || '#ffffff';
	const anchorRef = useRef( null );

	const toggleVisible = () => setIsVisible( !isVisible );
	const closeVisible = () => setIsVisible( false );

	return (
		<FieldControl
			id={field.id}
			label={field.label}
			premium={field.premium}
			help={field.description}
			className="adpresso-field-wrapper adpresso-color-picker-wrapper"
		>
			<div className="adpresso-color-picker-control" style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
				<button
					type="button"
					ref={anchorRef}
					className="adpresso-color-preview-btn"
					onClick={toggleVisible}
					style={{
						backgroundColor: colorValue,
						width:           '30px',
						height:          '30px',
						border:          '1px solid #ccc',
						borderRadius:    '4px',
						cursor:          'pointer',
						padding:         0
					}}
					aria-label="Select color"
				/>
				<input
					type="text"
					id={field.id}
					className="adpresso-input"
					value={colorValue}
					onChange={( e ) => onChange( field.id, e.target.value )}
					placeholder="#ffffff"
					style={{maxWidth: '120px'}}
				/>

				{isVisible && (
					<Popover anchor={anchorRef.current} position="bottom left" onClose={closeVisible} noArrow={false}>
						<div style={{padding: '16px'}}>
							<ColorPicker
								color={colorValue}
								onChangeComplete={( color ) => onChange( field.id, color.hex )}
								disableAlpha={true}
							/>
						</div>
					</Popover>
				)}
			</div>
		</FieldControl>
	);
};

export default ColorPickerField;