// Credits to https://github.com/GiovanniACamacho and https://github.com/Meligy for the TypeScript version
// Original post: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
import { useEffect, useState } from 'react';
// biome-ignore lint/style/noRestrictedImports: deprecated wrapper, intentional import
import { Droppable, DroppableProps } from 'react-beautiful-dnd';

/**
 * @deprecated Use `SortableList` from `@material-hu/components/composed-components/SortableList` instead.
 * Hugo's SortableList uses `@dnd-kit/core` — consumers must migrate away from `react-beautiful-dnd`.
 */
const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));
    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);
  if (!enabled) {
    return null;
  }
  return <Droppable {...props}>{children}</Droppable>;
};

export default StrictModeDroppable;