import { DragOverlayProps } from '@wix/wix-style-react-incubator/dnd-kit/core';
import React from 'react';
import { DragAndDropState } from './DragAndDropState';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';

export interface DragOverlayTestComponentProps<T, F extends FiltersMap>
  extends DragOverlayProps {
  state: DragAndDropState<T, F>;
}

function _DragOverlayTestComponent<T, F extends FiltersMap>(
  props: DragOverlayTestComponentProps<T, F>,
) {
  const {
    wrapperElement: Wrapper,
    style,
    children,
    className,
    zIndex,
    state,
  } = props;

  if (state.activeId == null) {
    return null;
  }

  let child = children;

  if (Wrapper) {
    child = <Wrapper>{children}</Wrapper>;
  }

  return (
    <div
      className={className}
      style={{
        position: 'fixed',
        ...style,
        zIndex,
      }}
    >
      {child}
    </div>
  );
}

export const DragOverlayTestComponent = observer(_DragOverlayTestComponent);