import { useState, useRef, useEffect } from '@wordpress/element';
import classnames from 'classnames';
import { useId } from '@wordpress/element';
// import './Popover.scss';

const DropdownPopover = ({ btnData, btnContent, content, isOpen, setIsOpen }) => {
	// const [isOpen, setIsOpen] = useState(false);
	const popoverRef = useRef(null);
	const id = useId();

	const togglePopover = () => {
		setIsOpen(!isOpen);
	};

	const closePopover = (event) => {
		if (popoverRef.current && !popoverRef.current.contains(event.target)) {
			setIsOpen(false);
		}
	};

	useEffect(() => {
		document.addEventListener('mousedown', closePopover);
		return () => {
			document.removeEventListener('mousedown', closePopover);
		};
	}, []);

	return (
		<div className='ud-edbi-popover' ref={popoverRef} id={id}>
			<button className={btnData.className} onClick={togglePopover}>
				{btnContent ? btnContent : <img src={btnData.icon} alt='icon' />}
			</button>

			<div className={classnames('dropdown', { 'is-open': isOpen })}>
				<div className={classnames('', btnData.contentClass)}>{content}</div>
			</div>
		</div>
	);
};

export default DropdownPopover;