"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.menuItemDimensions = exports.DropdownMenuItem = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
var _menu = require("@atlaskit/menu");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _floatingToolbar = require("../floating-toolbar");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic

// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports

var menuItemDimensions = exports.menuItemDimensions = {
  width: 175,
  height: 32
};
var labelStyles = (0, _react2.css)({
  display: 'inline-block',
  width: '100%'
});
var spacerStyles = (0, _react2.css)({
  display: 'flex',
  flex: 1,
  padding: "var(--ds-space-100, 8px)"
});

// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check

var DropdownButtonItem = _menu.ButtonItem;
var SelectedIconBefore = function SelectedIconBefore(_ref) {
  var itemSelected = _ref.itemSelected,
    intl = _ref.intl,
    showSelected = _ref.showSelected;
  if (showSelected && itemSelected) {
    return (0, _react2.jsx)("span", {
      "aria-hidden": "true"
    }, (0, _react2.jsx)(_checkMark.default, {
      label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK),
      spacing: "none"
    }));
  }
  return (0, _react2.jsx)("span", {
    css: spacerStyles
  });
};
var DropdownMenuItem = exports.DropdownMenuItem = function DropdownMenuItem(props) {
  var item = props.item,
    hide = props.hide,
    dispatchCommand = props.dispatchCommand,
    editorView = props.editorView,
    showSelected = props.showSelected,
    intl = props.intl;
  var itemSelected = item.selected;
  var iconBefore = (0, _react.useMemo)(function () {
    if (item.icon) {
      return item.icon;
    } else {
      return (0, _react2.jsx)(SelectedIconBefore, {
        itemSelected: itemSelected,
        showSelected: showSelected,
        intl: intl
      });
    }
  }, [itemSelected, showSelected, intl, item.icon]);
  var _useState = (0, _react.useState)(item.tooltip || ''),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    tooltipContent = _useState2[0],
    setTooltipContent = _useState2[1];
  var handleItemMouseOut = (0, _react.useCallback)(function () {
    setTooltipContent('');
    if (item.onMouseOut) {
      dispatchCommand(item.onMouseOut);
    }
  }, [item.onMouseOut, dispatchCommand]);
  var handleItemMouseDown = (0, _react.useCallback)(function (e) {
    e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
    if (item.onMouseDown) {
      dispatchCommand(item.onMouseDown);
    }
  }, [item.onMouseDown, dispatchCommand]);
  var handleItemMouseOver = (0, _react.useCallback)(function () {
    setTooltipContent(item.tooltip || '');
    if (item.onMouseOver) {
      dispatchCommand(item.onMouseOver);
    }
  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
  var handleItemMouseEnter = (0, _react.useCallback)(function (e) {
    if (item.onMouseEnter) {
      e.preventDefault();
      dispatchCommand(item.onMouseEnter);
    }
  }, [item.onMouseEnter, dispatchCommand]);
  var handleItemMouseLeave = (0, _react.useCallback)(function (e) {
    if (item.onMouseLeave) {
      e.preventDefault();
      dispatchCommand(item.onMouseLeave);
    }
  }, [item.onMouseLeave, dispatchCommand]);
  var handleItemOnFocus = (0, _react.useCallback)(function (e) {
    if (item.onFocus) {
      e.preventDefault();
      dispatchCommand(item.onFocus);
    }
  }, [item.onFocus, dispatchCommand]);
  var handleItemOnBlur = (0, _react.useCallback)(function (e) {
    if (item.onBlur) {
      e.preventDefault();
      dispatchCommand(item.onBlur);
    }
  }, [item.onBlur, dispatchCommand]);
  var handleItemClick = (0, _react.useCallback)(function () {
    /**
     * The order of dispatching the event and hide() is important, because
     * the ClickAreaBlock will be relying on the element to calculate the
     * click coordinate.
     * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
     */
    dispatchCommand(item.onClick);
    hide();
    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
      editorView === null || editorView === void 0 || editorView.focus();
    }
  }, [dispatchCommand, item.onClick, hide, editorView]);

  /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
  var labelRef = (0, _react.useRef)(null);
  var handleTitleWrapperMouseEvent = (0, _react.useCallback)(
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  function (e) {
    if (item.disabled) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, [item.disabled]);

  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  var isAriaChecked = function isAriaChecked(item) {
    var selected = item.selected,
      domItemOptions = item.domItemOptions;
    return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
  };

  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  var hasRole = function hasRole(item) {
    var _item$domItemOptions;
    // Always return proper menu roles to fix aria-required-children violations
    return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : 'menuitem';
  };
  (0, _react.useEffect)(function () {
    var labelRefCurrent = labelRef.current;
    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
    labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
    labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
    return function () {
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
    };
  });
  var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
    isSelected: itemSelected,
    iconBefore: iconBefore,
    iconAfter: item.elemAfter,
    onClick: handleItemClick,
    "data-testid": item.testId,
    isDisabled: item.disabled,
    onMouseDown: handleItemMouseDown,
    onMouseOver: handleItemMouseOver,
    onMouseEnter: handleItemMouseEnter,
    onMouseLeave: handleItemMouseLeave,
    onMouseOut: handleItemMouseOut,
    onFocus: handleItemOnFocus,
    onBlur: handleItemOnBlur,
    role: hasRole(item),
    "aria-checked": isAriaChecked(item)
  }, (0, _react2.jsx)("span", {
    ref: labelRef,
    css: labelStyles
  }, item.title));
  if (tooltipContent) {
    return (0, _react2.jsx)(_tooltip.default, {
      content: tooltipContent
    }, itemContent);
  }
  return itemContent;
};