import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { cloneElement } from 'react';
import { DraggableCardOverlayProps } from '../DragAndDrop';

function _GridDragOverlayCardItem<T, F extends FiltersMap>(
  props: DraggableCardOverlayProps<T, F>,
) {
  const {
    state: { _dnd },
    renderItem,
  } = props;

  const el =
    _dnd && _dnd.activeIndex != null ? renderItem(_dnd.activeIndex) : undefined;

  return el
    ? cloneElement(el, {
        isOverlay: true,
      })
    : null;
}

export const GridDragOverlayCardItem = observer(_GridDragOverlayCardItem);