/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports

import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
import { ButtonItem } from '@atlaskit/menu';
import Tooltip from '@atlaskit/tooltip';
import { messages } from '../floating-toolbar';
export const menuItemDimensions = {
  width: 175,
  height: 32
};
const labelStyles = css({
  display: 'inline-block',
  width: '100%'
});
const spacerStyles = 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

const DropdownButtonItem = ButtonItem;
const SelectedIconBefore = ({
  itemSelected,
  intl,
  showSelected
}) => {
  if (showSelected && itemSelected) {
    return jsx("span", {
      "aria-hidden": "true"
    }, jsx(EditorDoneIcon, {
      label: intl.formatMessage(messages.confirmModalOK),
      spacing: "none"
    }));
  }
  return jsx("span", {
    css: spacerStyles
  });
};
export const DropdownMenuItem = props => {
  const {
    item,
    hide,
    dispatchCommand,
    editorView,
    showSelected,
    intl
  } = props;
  const itemSelected = item.selected;
  const iconBefore = useMemo(() => {
    if (item.icon) {
      return item.icon;
    } else {
      return jsx(SelectedIconBefore, {
        itemSelected: itemSelected,
        showSelected: showSelected,
        intl: intl
      });
    }
  }, [itemSelected, showSelected, intl, item.icon]);
  const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
  const handleItemMouseOut = useCallback(() => {
    setTooltipContent('');
    if (item.onMouseOut) {
      dispatchCommand(item.onMouseOut);
    }
  }, [item.onMouseOut, dispatchCommand]);
  const handleItemMouseDown = useCallback(e => {
    e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
    if (item.onMouseDown) {
      dispatchCommand(item.onMouseDown);
    }
  }, [item.onMouseDown, dispatchCommand]);
  const handleItemMouseOver = useCallback(() => {
    setTooltipContent(item.tooltip || '');
    if (item.onMouseOver) {
      dispatchCommand(item.onMouseOver);
    }
  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
  const handleItemMouseEnter = useCallback(e => {
    if (item.onMouseEnter) {
      e.preventDefault();
      dispatchCommand(item.onMouseEnter);
    }
  }, [item.onMouseEnter, dispatchCommand]);
  const handleItemMouseLeave = useCallback(e => {
    if (item.onMouseLeave) {
      e.preventDefault();
      dispatchCommand(item.onMouseLeave);
    }
  }, [item.onMouseLeave, dispatchCommand]);
  const handleItemOnFocus = useCallback(e => {
    if (item.onFocus) {
      e.preventDefault();
      dispatchCommand(item.onFocus);
    }
  }, [item.onFocus, dispatchCommand]);
  const handleItemOnBlur = useCallback(e => {
    if (item.onBlur) {
      e.preventDefault();
      dispatchCommand(item.onBlur);
    }
  }, [item.onBlur, dispatchCommand]);
  const handleItemClick = useCallback(() => {
    /**
     * 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 ? 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 */
  const labelRef = useRef(null);
  const handleTitleWrapperMouseEvent = useCallback(
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  e => {
    if (item.disabled) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, [item.disabled]);

  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const isAriaChecked = item => {
    const {
      selected,
      domItemOptions
    } = item;
    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
  const 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';
  };
  useEffect(() => {
    const labelRefCurrent = labelRef.current;
    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
    labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
    labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
    return () => {
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
    };
  });
  const itemContent = 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)
  }, jsx("span", {
    ref: labelRef,
    css: labelStyles
  }, item.title));
  if (tooltipContent) {
    return jsx(Tooltip, {
      content: tooltipContent
    }, itemContent);
  }
  return itemContent;
};