import { Box, Popover } from '@wix/design-system';
import React, { ReactNode } from 'react';
import { NestedTableDragAndDropState } from './NestedTableDragAndDropState';
import { DepthLimitMessage } from './DepthLimitMessage';
import { observer } from 'mobx-react-lite';
import { DragAndDropDisabledMessage } from './DragAndDropDisabledMessage';

export interface NestedTableDragAndDropOverlayPopoverProps<C extends string> {
  children: ReactNode;
  state: NestedTableDragAndDropState<C>;
}

function _NestedTableDragAndDropOverlayPopover<C extends string>(
  props: NestedTableDragAndDropOverlayPopoverProps<C>,
) {
  const { state, children } = props;
  const { reachedMaxDepth, dragAndDropDisabled } = state;

  const { errorMessage } = dragAndDropDisabled || {};
  return (
    <Popover
      showArrow
      shown={!!dragAndDropDisabled || reachedMaxDepth}
      appendTo="parent"
      placement="top"
      dataHook="nested-table-dnd-overlay-popover"
    >
      <Popover.Element>{children}</Popover.Element>
      <Popover.Content>
        <Box padding="6px 8px">
          {errorMessage ? (
            <DragAndDropDisabledMessage message={errorMessage} />
          ) : (
            <DepthLimitMessage state={state} />
          )}
        </Box>
      </Popover.Content>
    </Popover>
  );
}

export const NestedTableDragAndDropOverlayPopover = observer(
  _NestedTableDragAndDropOverlayPopover,
);