import React, { useRef } from 'react';
import Tooltip, { TooltipProps } from 'antd/es/tooltip';
import 'antd/es/tooltip/style/index';
import { inspectEllipsisQuick } from '@jy-fe/utils/es/joyowoUmi';

const XuiResizableTd = props => {
  const className = 'xui-ant__resizable-td--tooltip';
  const { children, placement, ...restProps } = props;
  const node = useRef(null);
  const tooltipProps: TooltipProps = {
    overlayClassName: className,
    placement,
    title: children,
    destroyTooltipOnHide: true,
  };
  const clientNode: HTMLElement = node.current || document.body;
  if (clientNode.classList.contains('ant-table-cell')) {
    const isEllipsis = inspectEllipsisQuick(clientNode);
    if (isEllipsis) {
      return (
        <Tooltip {...tooltipProps}>
          <td ref={node} {...restProps}>
            {children}
          </td>
        </Tooltip>
      );
    }
  }

  return (
    <td ref={node} {...restProps}>
      {children}
    </td>
  );
};

export default XuiResizableTd;