/**
 * External dependencies
 */
import { ComponentType, useEffect, useState } from 'react';

/**
 * Internal dependencies
 */
import { EditorBlock } from './types';

interface EditingImageRequiredProps {
	isSelected: boolean;
}

type EditingImageProps< T extends EditorBlock< T > > = T &
	EditingImageRequiredProps;

export const withEditingImage = < T extends EditorBlock< T > >(
	Component: ComponentType< T >
) => ( props: EditingImageProps< T > ) => {
	const [ isEditingImage, setIsEditingImage ] = useState( false );
	const { isSelected } = props;

	useEffect( () => {
		setIsEditingImage( false );
	}, [ isSelected ] );

	return (
		<Component
			{ ...props }
			useEditingImage={ [ isEditingImage, setIsEditingImage ] }
		/>
	);
};