import { NestedTableDataItem } from '../../state/NestedTableState/NestedTableNodeState';
import { FiltersMap } from '@wix/bex-core';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Table } from '@wix/design-system';
import { useDraggableRowContext } from '@wix/wix-style-react-incubator/drag-and-drop';

export interface NestedTableGhostIndentationCellProps<
  C extends string,
  T,
  F extends FiltersMap,
> {
  item: NestedTableDataItem<C, T, F>;
}

function _NestedTableGhostIndentationCell<
  C extends string,
  T,
  F extends FiltersMap,
>(props: NestedTableGhostIndentationCellProps<C, T, F>) {
  const { item } = props;
  const { state } = item;
  const { nestedTable } = state;
  const { isDragOverlay } = useDraggableRowContext();

  const dragDepth = nestedTable.nestedTableDragAndDrop?.dragAndDropDisabled
    ? nestedTable.nestedTableDragAndDrop.dragEventItems?.activeItem.item.state
        .childrenDepth
    : nestedTable.nestedTableDragAndDrop?.dragEventDepth?.depth;

  const { tableDragAndDropState } = nestedTable.tableState;

  const activeId = tableDragAndDropState?.dnd.activeId;

  if (activeId !== item.originalKeyedItem?.id || isDragOverlay) {
    return null;
  }

  const { classes } = Table.dataTableRowStyle;

  return (
    <td
      data-hook="ghost-indentation-cell"
      {...(process.env.NODE_ENV === 'test' && {
        'data-indentation-width': nestedTable._indentationWidth,
        'data-parent-cell-padding-start': nestedTable._parentCellPaddingStart,
      })}
      style={{
        visibility: 'visible',
        paddingInlineStart: 0,
        paddingInlineEnd: 0,
        width:
          (dragDepth === 0 ? 0 : nestedTable._parentCellPaddingStart) +
          (dragDepth ?? 0) * nestedTable._indentationWidth,
      }}
      className={classes.light}
    />
  );
}

export const NestedTableGhostIndentationCell = observer(
  _NestedTableGhostIndentationCell,
);