export const Html5BackendWithDropEffectSupport = (manager, context) => {
	const result = HTML5Backend(manager, context);
	result.dropTargetOptions = {};

	result.handleTopDragOver_ = result.handleTopDragOver;
	result.handleTopDragOver = (e) => {
		const { dragOverTargetIds } = result;
		const bestDropTarget = (dragOverTargetIds ?? []).find(
			(x) => result.monitor.canDropOnTarget(x) && x
		);

		const dropTargetDropEffect =
			bestDropTarget &&
			result.dropTargetOptions[bestDropTarget]?.dropEffect;

		result.handleTopDragOver_(e);
		// Check e.altKey to preseve altKey to copy behavior
		result.altKeyPressed = e.altKey || Boolean(dropTargetDropEffect);
		e.dataTransfer.dropEffect =
			dropTargetDropEffect || e.dataTransfer.dropEffect;
	};

	result.connectDropTarget_ = result.connectDropTarget;
	result.connectDropTarget = (targetId, node, options) => {
		result.dropTargetOptions[targetId] = options;
		const unsubscribe = result.connectDropTarget_(targetId, node, options);

		return () => {
			delete result.dropTargetOptions[targetId];
			unsubscribe();
		};
	};

	return result;
};