import { useEffect, useRef } from '@wordpress/element';

/** Adjusts the editor height to fit the taskbar drop */
export const useEditorHeightAdjust = ({ open, leaveDelay = 0 }) => {
	const timerId = useRef(0);
	const previous = useRef(null);

	useEffect(() => {
		const editor = document.querySelector('.edit-post-layout');
		if (!open) return;
		if (!editor) return;
		clearTimeout(timerId.current);
		// Return if in full screen mode
		if (document.body.classList.contains('is-fullscreen-mode')) return;
		// In case something is there, save it for when we close
		if (open) previous.current = editor.style;
		const previousStyles = previous.current;
		// Position it so it plays nicely with the expanding taskbar
		editor.style.position = 'absolute';
		editor.style.left = '0';
		editor.style.top = '0';
		editor.style.right = '0';
		return () => {
			const editor = document.querySelector('.edit-post-layout');
			timerId.current = setTimeout(() => {
				editor.style = previousStyles;
			}, leaveDelay);
		};
	}, [open, leaveDelay]);
};
