"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ClosableTab = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactDnd = require("react-dnd");
var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
var _button = require("../button");
var _tooltip = require("../tooltip");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const DND_ITEM_TYPE = 'DND_CLOSABLE_TAB_TYPE';
const ClosableTab = ({
  tab,
  index,
  tooltipClassName,
  isActive = false,
  isDisabled = false,
  onClick = () => {},
  onSelect = () => {},
  onClose = () => {},
  closeTabText,
  groupIdentifier,
  canBeDragged,
  isAnyItemDragging,
  setIsAnyItemDragging,
  onItemMove,
  getIndexByKey,
  onDragEnd
}) => {
  const id = [groupIdentifier, tab.key].filter(Boolean).join('-');
  const dropRef = (0, _react.useRef)(null);
  const getTestId = (suffix = '') => tab.testId ? [tab.testId, suffix].filter(Boolean).join('-') : undefined;
  const [, drop] = (0, _reactDnd.useDrop)({
    accept: DND_ITEM_TYPE,
    hover(item, monitor) {
      if (!dropRef.current) {
        return;
      }
      item.index = getIndexByKey(item.key);
      const dragIndex = item.index;
      const hoverIndex = index;
      if (dragIndex === hoverIndex) {
        return;
      }
      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
      const clientOffset = monitor.getClientOffset();
      const hoverClientX = (clientOffset?.x || 0) - hoverBoundingRect.left;
      if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
        return;
      }
      if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
        return;
      }
      onItemMove(dragIndex, hoverIndex);
      item.index = hoverIndex;
    },
    canDrop: () => {
      return canBeDragged;
    }
  });
  const [, drag] = (0, _reactDnd.useDrag)({
    type: DND_ITEM_TYPE,
    item: tab,
    collect: monitor => {
      const isDragging = !!monitor.isDragging();
      if (isDragging) {
        setIsAnyItemDragging(true);
      }
      return {
        isDragging
      };
    },
    canDrag() {
      return canBeDragged;
    },
    end(item) {
      if (onDragEnd) {
        onDragEnd(item, item.index || 0);
      }
    }
  });
  drag(dropRef);
  drop(dropRef);
  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)('closable-tab', {
      'closable-tab-active': isActive,
      'closable-tab-disabled': isDisabled || tab.isDisabled
    }, tab.className),
    ref: dropRef,
    "test-id": getTestId(),
    onMouseDown: () => {
      setIsAnyItemDragging(true);
    },
    onMouseLeave: () => {
      setIsAnyItemDragging(false);
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      type: "radio",
      className: "closable-tab-input",
      id: id,
      checked: isActive,
      value: tab.key,
      onClick: () => onClick(tab),
      onChange: () => isActive ? null : onSelect(tab),
      disabled: isDisabled || tab.isDisabled,
      "test-id": getTestId('input')
    }, tab.key), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
      isDisabled: isAnyItemDragging,
      content: tab.tooltip,
      className: tooltipClassName,
      placement: tab.tooltipPlacement ?? _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
        htmlFor: id,
        className: "closable-tab-label",
        "test-id": getTestId('label'),
        children: [tab.label, tab.isProcessing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: _faCircleNotch.faCircleNotch,
          spin: true,
          className: "closable-tab-processing-icon",
          "test-id": getTestId('processing')
        }) : null]
      }, "tabgroup-label")
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
      className: "closable-tab-close",
      accentType: _button.ACCENT_TYPES.COMMAND,
      size: _button.BUTTON_SIZES.SM,
      testId: getTestId('close'),
      isDisabled: isDisabled || tab.isDisabled,
      onClick: () => onClose(tab),
      "aria-label": closeTabText,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
        icon: _faXmark.faXmark
      })
    })]
  });
};
exports.ClosableTab = ClosableTab;