import { IconSize as H } from "../../foundation/Icon/IconSize.es.es.js";
import { useLink as ie } from "../../../../../@react-aria/link/dist/module.es.js";
import { FOCUS_VISIBLE_STYLE as se } from "../../utilities/focusStyle.es.es.js";
import { merge as s } from "../../utilities/merge.es.es.js";
import e, { useRef as w, useMemo as me, useState as O, useCallback as h, useEffect as de, cloneElement as k } from "react";
import { BrightHeader as we, brightHeaderArrowBackgroundColors as v } from "./BrightHeader.es.es.js";
import { usePopper as be } from "../../../../../react-popper/lib/esm/usePopper.es.js";
import { createPortal as ce } from "react-dom";
import { Button as A } from "../Button/Button.es.es.js";
import { ButtonStyle as U, ButtonEmphasis as $, ButtonSize as G } from "../Button/ButtonTypes.es.es.js";
const J = {
  small: "tw-pt-3.5",
  large: "tw-pt-4"
}, V = {
  small: "tw-pb-3.5",
  large: "tw-pb-4"
};
var ue = /* @__PURE__ */ ((r) => (r.Top = "Top", r.Right = "Right", r.Bottom = "Bottom", r.Left = "Left", r))(ue || {});
const fe = {
  ["Top-Start"]: "top-start",
  ["Top-End"]: "top-end",
  ["Bottom-Start"]: "bottom-start",
  ["Bottom-End"]: "bottom-end",
  ["Left-Start"]: "left-start",
  ["Left-End"]: "left-end",
  ["Right-Start"]: "right-start",
  ["Right-End"]: "right-end",
  ["Top-Middle"]: "top",
  ["Right-Middle"]: "right",
  ["Bottom-Middle"]: "bottom",
  ["Left-Middle"]: "left"
}, pe = (r, l, a) => {
  switch (!0) {
    case r.toString().includes("Top".toLowerCase()):
      return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white";
    case r.toString().includes("Right".toLowerCase()):
      return s([
        "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]",
        l && a === "Start" ? v[l] : "before:tw-bg-black-100 before:dark:tw-bg-white"
      ]);
    case r.toString().includes("Bottom".toLowerCase()):
      return s([
        "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
        l ? v[l] : "before:tw-bg-black-100 before:dark:tw-bg-white"
      ]);
    case r.toString().includes("Left".toLowerCase()):
      return s([
        "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]",
        l && a === "Start" ? v[l] : "before:tw-bg-black-100 before:dark:tw-bg-white"
      ]);
    default:
      return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white";
  }
}, ye = ({
  content: r,
  tooltipIcon: l,
  heading: a,
  headingIcon: b,
  linkUrl: n,
  linkLabel: E,
  brightHeader: d,
  buttons: t,
  children: Y,
  position: x = "Bottom",
  alignment: S = "Middle",
  withArrow: c,
  flip: Z = !0,
  triggerElement: B,
  hoverDelay: L = 200,
  enterDelay: p = 0,
  open: T = !1,
  disabled: j = !1,
  hidden: q = !1
}) => {
  var y, N;
  const u = w(null), z = w(null), { linkProps: K } = ie({}, z), Q = me(
    () => n || d || t || a || b,
    [n, d, t, a, b]
  ), W = fe[`${x}-${S}`], g = w(null), C = w(null), [X, ee] = O(null), te = c ? 10 : 5, f = be(u == null ? void 0 : u.current, g.current, {
    placement: W,
    strategy: "fixed",
    modifiers: [
      {
        name: "arrow",
        options: {
          element: X
        }
      },
      {
        name: "offset",
        options: {
          offset: [0, te]
        }
      },
      {
        name: "flip",
        enabled: Z
      }
    ]
  }), re = (N = (y = f.state) == null ? void 0 : y.placement) != null ? N : x, oe = pe(re, d, S), [le, o] = O(!1), m = w(null), M = h(() => {
    m.current && clearTimeout(m.current), m.current = setTimeout(() => o(!1), L);
  }, [L]), R = h(() => {
    if (m.current && clearTimeout(m.current), p) {
      m.current = setTimeout(() => o(!0), p);
      return;
    }
    o(!0);
  }, [p]), D = h(
    (i) => {
      var I, _;
      const F = (_ = i.path) != null ? _ : (I = i.composedPath) == null ? void 0 : I.call(i);
      F && [u, C, g].some((P) => F.includes(P == null ? void 0 : P.current)) && R();
    },
    [R]
  ), ae = !!((t == null ? void 0 : t.length) || (n == null ? void 0 : n.length)), ne = {
    onMouseOver: (i) => D(i.nativeEvent),
    onMouseLeave: M,
    onFocus: () => o(!0),
    onBlur: () => ae ? null : o(!1)
  };
  return de(() => {
    o(T);
  }, [T]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
    ...ne,
    ref: C
  }, B && k(B, {
    ref: u
  })), le && !j && ce(
    /* @__PURE__ */ e.createElement("div", {
      ref: g,
      className: s([
        "tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]",
        q && "tw-hidden"
      ]),
      "data-test-id": "tooltip",
      role: "tooltip",
      style: f.styles.popper,
      ...f.attributes.popper,
      onFocus: () => o(!0),
      onMouseOver: (i) => D(i.nativeEvent),
      onMouseLeave: M
    }, d && /* @__PURE__ */ e.createElement(we, {
      headerStyle: d
    }), /* @__PURE__ */ e.createElement("div", {
      className: s([
        "tw-px-4",
        Q ? J.small : J.large,
        n ? V.small : V.large
      ])
    }, a && /* @__PURE__ */ e.createElement("h4", {
      className: "tw-flex tw-text-m tw-font-bold tw-mb-1"
    }, b && /* @__PURE__ */ e.createElement("span", {
      className: "tw-mr-1.5"
    }, k(b, { size: H.Size20 })), a), /* @__PURE__ */ e.createElement("div", {
      className: "tw-flex"
    }, l && /* @__PURE__ */ e.createElement("span", {
      className: "tw-shrink-0 tw-mr-1"
    }, k(l, { size: H.Size16 })), /* @__PURE__ */ e.createElement("p", {
      className: "tw-text-s tw-min-w-0 tw-break-words"
    }, r)), n && /* @__PURE__ */ e.createElement("a", {
      ...K,
      "data-test-id": "tooltip-link",
      ref: z,
      href: n,
      target: "_blank",
      rel: "noopener noreferrer",
      className: s([
        "tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1",
        se
      ]),
      onBlur: () => t && t.length > 0 ? null : o(!1)
    }, E != null ? E : "Click here to learn more."), t && /* @__PURE__ */ e.createElement("div", {
      className: "tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4"
    }, t.length > 0 && /* @__PURE__ */ e.createElement("div", {
      onBlur: () => t && t.length < 2 ? o(!1) : null
    }, /* @__PURE__ */ e.createElement(A, {
      style: U.Default,
      emphasis: $.Strong,
      size: G.Small,
      onClick: t[0].action
    }, t[0].label)), t.length === 2 && /* @__PURE__ */ e.createElement("div", {
      onBlur: () => o(!1)
    }, /* @__PURE__ */ e.createElement(A, {
      style: U.Default,
      emphasis: $.Default,
      size: G.Small,
      onClick: t[1].action
    }, t[1].label))), /* @__PURE__ */ e.createElement("div", {
      "data-test-id": "popover-arrow",
      "data-popper-arrow": c,
      ref: ee,
      style: f.styles.arrow,
      className: s([
        c && "tw-popper-arrow tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line",
        c && oe
      ])
    })), Y),
    document.body
  ));
};
export {
  ye as Tooltip,
  ue as TooltipPosition
};
//# sourceMappingURL=Tooltip.es.es.js.map
