import React from 'react';
import { observer } from 'mobx-react-lite';
import { NestedTableDragAndDropState } from './NestedTableDragAndDropState';
import { Tag } from '@wix/design-system';
import { BlockSmall } from '@wix/wix-ui-icons-common';

export interface NestedTableDragAndDropDropMessageProps<C extends string> {
  state: NestedTableDragAndDropState<C>;
}

function _DepthLimitMessage<C extends string>(
  props: NestedTableDragAndDropDropMessageProps<C>,
) {
  const { state } = props;

  const { nestedState } = state;
  const {
    levels,
    container: { translate: t },
  } = nestedState;

  return (
    <Tag
      id="nested-table-dnd-depth-limit-message"
      dataHook="nested-table-dnd-depth-limit-message"
      theme="light"
      thumb={<BlockSmall />}
      removable={false}
    >
      {t('cairo.collectionPage.nestedLimit.tooltip', {
        subCatsAmount: levels.length,
      })}
    </Tag>
  );
}

export const DepthLimitMessage = observer(_DepthLimitMessage);