import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { useButton as j } from "@react-aria/button";
import { useFocusRing as B, FocusScope as D } from "@react-aria/focus";
import { useMenuTrigger as z } from "@react-aria/menu";
import { useOverlay as M, DismissButton as h } from "@react-aria/overlays";
import { mergeProps as W } from "@react-aria/utils";
import { useMenuTriggerState as L } from "@react-stately/menu";
import { AnimatePresence as E, motion as Y } from "framer-motion";
import { useRef as x, useState as U, useEffect as V } from "react";
import { ActionMenu as _ } from "../../ActionMenu/ActionMenu/ActionMenu.es.js";
import $ from "../../../foundation/Icon/Generated/IconCaretDown.es.js";
import { IconSize as q } from "../../../foundation/Icon/IconSize.es.js";
import { useMemoizedId as g } from "../../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as G } from "../../../utilities/focusStyle.es.js";
import { merge as n } from "../../../utilities/merge.es.js";
import { AssetInputSize as a } from "../AssetInput.es.js";
import { AssetThumbnail as H } from "../AssetThumbnail.es.js";
import { AssetSubline as J } from "./AssetSubline.es.js";
import { SpinningCircle as K } from "./SpinningCircle.es.js";
const Q = ({
  asset: e,
  size: s,
  actions: v,
  isLoading: m,
  hideSize: k = !1,
  hideExtension: y = !1
}) => {
  const S = g(), u = g(), r = x(null), o = L({}), { isOpen: i, focusStrategy: N } = o, { menuTriggerProps: A } = z({}, o, r), { buttonProps: F } = j(A, r), { isFocusVisible: c, focusProps: C } = B(), d = x(null), { overlayProps: T } = M(
    { onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: i, isDismissable: !0 },
    d
  ), f = (e == null ? void 0 : e.name) || "Your Asset", [I, O] = U(0);
  return V(() => {
    let w = null;
    const P = () => {
      var b;
      const R = ((b = r.current) == null ? void 0 : b.getBoundingClientRect().width) ?? 0;
      w = setTimeout(() => O(R), 0);
    }, p = new ResizeObserver(P);
    return r.current && p.observe(r.current), () => {
      w && clearTimeout(w), p.disconnect();
    };
  }, []), /* @__PURE__ */ l(
    "div",
    {
      className: "tw-font-sans tw-w-full tw-text-s tw-bg-transparent tw-font-normal tw-min-w-0",
      title: f,
      "data-test-id": "asset-single-input",
      children: [
        /* @__PURE__ */ l(
          "button",
          {
            type: "button",
            ...W(F, C),
            ref: r,
            "aria-labelledby": u,
            className: n([
              "tw-w-full tw-flex tw-border tw-rounded tw-overflow-hidden hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none",
              c && G,
              s === a.Large ? "tw-h-[11.5rem] tw-flex-col" : "tw-h-14",
              i || c ? "tw-border-black-90 dark:tw-border-black-10" : "tw-border-black-20 dark:tw-border-black-80"
            ]),
            children: [
              m && !e && /* @__PURE__ */ t(
                "div",
                {
                  className: n([
                    "tw-flex tw-justify-center tw-items-center",
                    s === a.Large ? "tw-w-full tw-h-32" : "tw-w-14 tw-h-full"
                  ]),
                  children: /* @__PURE__ */ t(K, { size: s })
                }
              ),
              e && /* @__PURE__ */ t(H, { asset: e, size: s, isActive: i || c }),
              /* @__PURE__ */ l(
                "div",
                {
                  className: n([
                    "tw-min-w-0 tw-max-w-full tw-flex tw-flex-auto tw-self-stretch tw-border-black-100 tw-border-opacity-25",
                    s === a.Large ? "tw-h-14 tw-border-t" : "tw-h-full tw-border-l"
                  ]),
                  children: [
                    /* @__PURE__ */ l("div", { className: "tw-min-w-0 tw-pr-3 tw-pl-4 tw-flex tw-flex-auto tw-flex-col tw-items-start tw-justify-center tw-h-full", children: [
                      /* @__PURE__ */ t(
                        "span",
                        {
                          id: u,
                          className: n([
                            "tw-max-w-full tw-text-black-100 tw-text-s tw-truncate dark:tw-text-white",
                            (i || c) && "tw-font-medium"
                          ]),
                          children: f
                        }
                      ),
                      /* @__PURE__ */ t(
                        J,
                        {
                          asset: e,
                          isLoading: m,
                          hideSize: k,
                          hideExtension: y
                        }
                      )
                    ] }),
                    /* @__PURE__ */ t("div", { className: "tw-p-4 tw-flex tw-flex-none tw-items-center tw-justify-center", children: /* @__PURE__ */ t(
                      "span",
                      {
                        className: n([
                          "tw-transition-transform",
                          i ? "tw-rotate-180 tw-text-black-90" : "tw-text-black-60"
                        ]),
                        children: /* @__PURE__ */ t($, { size: q.Size16 })
                      }
                    ) })
                  ]
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ t(E, { children: i && /* @__PURE__ */ t(
          Y.div,
          {
            style: {
              width: I
            },
            className: "tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-box-border tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20",
            "data-test-id": "asset-single-input-flyout",
            initial: { height: 0 },
            animate: { height: "auto" },
            exit: { height: 0 },
            transition: { ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 },
            children: /* @__PURE__ */ t(D, { restoreFocus: !0, children: /* @__PURE__ */ l("div", { ...T, ref: d, children: [
              /* @__PURE__ */ t(h, { onDismiss: () => o.close() }),
              /* @__PURE__ */ t(
                _,
                {
                  menuBlocks: v,
                  focus: N ?? void 0,
                  onClick: () => o.close()
                }
              ),
              /* @__PURE__ */ t(h, { onDismiss: () => o.close() })
            ] }) })
          },
          `asset-input-menu-${S}`
        ) })
      ]
    }
  );
};
Q.displayName = "FondueSelectedAsset";
export {
  Q as SelectedAsset
};
//# sourceMappingURL=SelectedAsset.es.js.map
