import React__default, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from '@carbon/react';
import { useLangDirection } from '../../../../utils/useLangDirection.js';
import { settings } from '../../../../constants/Settings.js';
import { Draggable } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  /**
   * Callback when a user mouse downs on the handle. That can start a DnD operation. The
   * `useTableDnd` does the real work of tracking the drag.
   */
  onStartDrag: PropTypes.func.isRequired,
  /**
   * The ID of the table row this handle is it. This is the row that will be dragged by this handle.
   */
  rowId: PropTypes.string.isRequired,
  /**
   * If a drag operation is currently in progress. When true, the tooltip is hidden.
   */
  isDragging: PropTypes.bool.isRequired,
  /**
   * Tooltip text to display on hover.
   */
  tooltipText: PropTypes.string.isRequired
};

/**
 * Drag handle image the user needs to click and drag to start a drag and drop operation.
 */
var TableDragHandle = /*#__PURE__*/forwardRef(function TableDragHandle(_ref, ref) {
  var onStartDrag = _ref.onStartDrag,
    rowId = _ref.rowId,
    isDragging = _ref.isDragging,
    tooltipText = _ref.tooltipText;
  var langDir = useLangDirection();
  var tooltipPosition = langDir === 'ltr' ? 'right-start' : 'left-end';
  return /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--table-drag-handle"),
    ref: ref,
    role: "presentation",
    onMouseDown: function onMouseDown(e) {
      e.preventDefault();
      e.stopPropagation();
      onStartDrag(e, rowId);
    }
  }, isDragging ?
  /*#__PURE__*/
  // During drag, render icon without tooltip
  React__default.createElement("div", {
    className: "".concat(iotPrefix, "--table-drag-handle-icon")
  }, /*#__PURE__*/React__default.createElement(Draggable, null)) :
  /*#__PURE__*/
  // When not dragging, render with tooltip
  React__default.createElement(Tooltip, {
    label: tooltipText,
    align: tooltipPosition
  }, /*#__PURE__*/React__default.createElement(Draggable, null)));
});
TableDragHandle.propTypes = propTypes;
TableDragHandle.__docgenInfo = {
  "description": "Drag handle image the user needs to click and drag to start a drag and drop operation.",
  "methods": [],
  "displayName": "TableDragHandle",
  "props": {
    "onStartDrag": {
      "description": "Callback when a user mouse downs on the handle. That can start a DnD operation. The\n`useTableDnd` does the real work of tracking the drag.",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "rowId": {
      "description": "The ID of the table row this handle is it. This is the row that will be dragged by this handle.",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "isDragging": {
      "description": "If a drag operation is currently in progress. When true, the tooltip is hidden.",
      "type": {
        "name": "bool"
      },
      "required": true
    },
    "tooltipText": {
      "description": "Tooltip text to display on hover.",
      "type": {
        "name": "string"
      },
      "required": true
    }
  }
};

export { TableDragHandle };
