'use strict';

var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var useLangDirection = require('../../../../utils/useLangDirection.js');
var Settings = require('../../../../constants/Settings.js');
var iconsReact = require('@carbon/icons-react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var iotPrefix = Settings.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__default.default.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__default.default.string.isRequired,
  /**
   * If a drag operation is currently in progress. When true, the tooltip is hidden.
   */
  isDragging: PropTypes__default.default.bool.isRequired,
  /**
   * Tooltip text to display on hover.
   */
  tooltipText: PropTypes__default.default.string.isRequired
};

/**
 * Drag handle image the user needs to click and drag to start a drag and drop operation.
 */
var TableDragHandle = /*#__PURE__*/React.forwardRef(function TableDragHandle(_ref, ref) {
  var onStartDrag = _ref.onStartDrag,
    rowId = _ref.rowId,
    isDragging = _ref.isDragging,
    tooltipText = _ref.tooltipText;
  var langDir = useLangDirection.useLangDirection();
  var tooltipPosition = langDir === 'ltr' ? 'right-start' : 'left-end';
  return /*#__PURE__*/React__default.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.default.createElement("div", {
    className: "".concat(iotPrefix, "--table-drag-handle-icon")
  }, /*#__PURE__*/React__default.default.createElement(iconsReact.Draggable, null)) :
  /*#__PURE__*/
  // When not dragging, render with tooltip
  React__default.default.createElement(react.Tooltip, {
    label: tooltipText,
    align: tooltipPosition
  }, /*#__PURE__*/React__default.default.createElement(iconsReact.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
    }
  }
};

exports.TableDragHandle = TableDragHandle;
