import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable @atlaskit/design-system/no-nested-styles */
/* eslint-disable @atlaskit/design-system/prefer-primitives */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';

// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
import { useIntl } from 'react-intl';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
import PanelRightIcon from '@atlaskit/icon/core/panel-right';
import { fg } from '@atlaskit/platform-feature-flags';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { buildVisitedNonHyperLinkPayload, INPUT_METHOD } from '../../analytics';
import { cardMessages } from '../../messages';
/**
 * Dynamic padding value that adjusts based on the editor's base font size.
 * When base font size is <= akEditorFullPageDenseFontSize (13px), uses 1px padding.
 * Otherwise, uses default value with token('space.025').
 */
var DYNAMIC_PADDING_BLOCK = "clamp(1px, calc((var(--ak-editor-base-font-size, ".concat(akEditorFullPageDefaultFontSize, "px) - ").concat(akEditorFullPageDenseFontSize, "px) * 999), ", "var(--ds-space-025, 2px)", ")");
var containerStyles = css({
  position: 'relative'
});
var iconWrapperStyles = xcss({
  display: 'inline-flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '17px',
  width: '17px'
});
var hiddenTextStyle = css({
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  position: 'absolute',
  visibility: 'hidden'
});
var linkStylesCommon = xcss({
  position: 'absolute',
  left: 'space.025',
  display: 'inline-flex',
  alignItems: 'center',
  verticalAlign: 'middle',
  paddingBlock: 'space.025',
  paddingInline: 'space.050',
  gap: 'space.025',
  overflow: 'hidden',
  zIndex: 'card',
  backgroundColor: 'color.background.accent.gray.subtlest',
  borderRadius: "var(--ds-radius-small, 3px)",
  color: 'color.text.subtle',
  textDecoration: 'none',
  whiteSpace: 'nowrap',
  top: '0px',
  height: '1.2em',
  ':hover': {
    backgroundColor: 'elevation.surface.hovered',
    color: 'color.text.subtle',
    textDecoration: 'none'
  }
});
var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
var ICON_WIDTH = 16;
var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English

var visitCardLinkAnalytics = function visitCardLinkAnalytics(editorAnalyticsApi, inputMethod) {
  return function (state, dispatch) {
    if (!(state.selection instanceof NodeSelection)) {
      return false;
    }
    var type = state.selection.node.type;
    if (dispatch) {
      var tr = state.tr;
      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(buildVisitedNonHyperLinkPayload(type.name, inputMethod))(tr);
      dispatch(tr);
    }
    return true;
  };
};
var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
  var children = _ref.children,
    _ref$isVisible = _ref.isVisible,
    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
    url = _ref.url,
    destinationUrl = _ref.destinationUrl,
    _ref$compactPadding = _ref.compactPadding,
    compactPadding = _ref$compactPadding === void 0 ? false : _ref$compactPadding,
    editorAnalyticsApi = _ref.editorAnalyticsApi,
    view = _ref.view,
    onClick = _ref.onClick,
    _ref$showPanelButton = _ref.showPanelButton,
    showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton,
    showPanelButtonIcon = _ref.showPanelButtonIcon;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var containerRef = useRef(null);
  var hoverLinkButtonRef = useRef(null);
  var hiddenTextRef = useRef(null);
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    showLabel = _useState2[0],
    setShowLabel = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isHovered = _useState4[0],
    setHovered = _useState4[1];
  var openTextWidthRef = useRef(null);
  var regularPadding = expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? DYNAMIC_PADDING_BLOCK : "var(--ds-space-025, 2px)";
  var memoizedHoverLinkStyles = useMemo(function () {
    return {
      paddingBlock: compactPadding ? '1px' : regularPadding
    };
  }, [compactPadding, regularPadding]);
  var hoverLinkStyles = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedHoverLinkStyles : {
    paddingBlock: compactPadding ? '1px' : expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? DYNAMIC_PADDING_BLOCK : "var(--ds-space-025, 2px)"
  };
  useLayoutEffect(function () {
    var _containerRef$current, _hoverLinkButtonRef$c;
    if (!isVisible || !isHovered) {
      return;
    }
    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
    var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
    // Get the hidden text width
    if (!openTextWidthRef.current) {
      var hiddenText = hiddenTextRef.current;
      if (hiddenText) {
        // Measure the width of the hidden text
        // Temporarily make the element visible to measure its width
        hiddenText.style.visibility = 'hidden';
        hiddenText.style.display = 'inline';
        openTextWidthRef.current = hiddenText.offsetWidth;

        // Reset the hiddenText's display property
        hiddenText.style.display = 'none';
        hiddenText.style.visibility = 'inherit';
      } else {
        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
      }
    }
    if (!cardWidth || !openButtonWidth) {
      return;
    }
    var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
    var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;

    // When a smart link wraps to multiple lines in a constrained container (e.g. table cell),
    // the hover button can overflow beyond the container bounds. We detect this by comparing
    // the button's right edge to the container's right edge, and hide the label if it overflows.
    if (containerRef.current && hoverLinkButtonRef.current) {
      var containerRight = containerRef.current.getBoundingClientRect().right;
      var buttonRight = hoverLinkButtonRef.current.getBoundingClientRect().right;
      if (buttonRight > containerRight) {
        canShowLabel = false;
      }
    }
    setShowLabel(canShowLabel);
  }, [isVisible, isHovered]);
  var handleOverlayChange = function handleOverlayChange(isHovered) {
    setHovered(isHovered);

    // Reset label visibility on hover start so we can measure if it overflows.
    // Without this, the label stays hidden from a previous hover and won't be re-measured.
    if (isHovered) {
      setShowLabel(true);
    }
  };
  var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
    if (editorAnalyticsApi && view) {
      visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
    }
  };
  var handleDoubleClick = function handleDoubleClick() {
    if (!showPanelButton) {
      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);

      // Double click opens the link in a new tab
      window.open(fg('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url, '_blank');
    }
  };
  var handleClick = function handleClick(event) {
    if (showPanelButton && onClick) {
      onClick(event);
    } else {
      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
    }
  };
  var isPreviewButton = showPanelButton && editorExperiment('platform_editor_preview_panel_linking_exp', true);
  var label = isPreviewButton ? formatMessage(cardMessages.previewButtonTitle) : formatMessage(cardMessages.openButtonTitle);
  var icon = null;
  if (isPreviewButton && showPanelButtonIcon === 'panel') {
    icon = jsx(PanelRightIcon, {
      label: ""
    });
  } else if (isPreviewButton && showPanelButtonIcon === 'modal') {
    icon = jsx(GrowDiagonalIcon, {
      label: ""
    });
  } else {
    icon = jsx(LinkExternalIcon, {
      label: ""
    });
  }
  return jsx("span", {
    ref: containerRef,
    css: containerStyles,
    onDoubleClick: handleDoubleClick,
    onMouseEnter: function onMouseEnter() {
      return handleOverlayChange(true);
    },
    onMouseLeave: function onMouseLeave() {
      return handleOverlayChange(false);
    }
    // No-op focus/blur handlers to satisfy a11y/mouse-events-have-key-events rule.
    // The hover overlay is a mouse convenience — keyboard users can access link actions
    // (open, preview) via the floating toolbar that appears on selection.
    ,
    onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
    onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
  }, children, jsx("span", {
    css: hiddenTextStyle,
    "aria-hidden": "true"
  }, jsx(Text, {
    ref: hiddenTextRef,
    size: "small",
    maxLines: 1
  }, label)), isHovered && jsx(Anchor, {
    ref: hoverLinkButtonRef,
    xcss: linkStylesCommon,
    href: fg('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url,
    target: "_blank"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic paddingBlock value based on experiment flags
    ,
    style: hoverLinkStyles,
    onClick: handleClick,
    testId: "inline-card-hoverlink-overlay"
  }, jsx(Box, {
    xcss: iconWrapperStyles,
    "data-inlinecard-button-overlay": "icon-wrapper-line-height",
    testId: "inline-card-hoverlink-overlay-icon"
  }, icon), showLabel && jsx(Text, {
    size: "small",
    color: "color.text.subtle",
    maxLines: 1,
    testId: "inline-card-hoverlink-overlay-label"
  }, label)));
};
export default HoverLinkOverlay;