import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { IconCaretDown as B } from "@frontify/fondue-icons";
import { useButton as D } from "@react-aria/button";
import { useFocusRing as I, FocusScope as M } from "@react-aria/focus";
import { useMenuTrigger as W } from "@react-aria/menu";
import { useOverlay as L, DismissButton as h } from "@react-aria/overlays";
import { mergeProps as z } from "@react-aria/utils";
import { useMenuTriggerState as E } from "@react-stately/menu";
import { useRef as x, useState as Y, useEffect as U } from "react";
import { ActionMenu as V } from "../../ActionMenu/ActionMenu.es.js";
import { useMemoizedId as g } from "../../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as _ } 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 $ } from "../AssetThumbnail.es.js";
import { AssetSubline as q } from "./AssetSubline.es.js";
import { SpinningCircle as G } from "./SpinningCircle.es.js";
import { motion as H } from "../../../node_modules/.pnpm/framer-motion@12.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
import { AnimatePresence as J } from "../../../node_modules/.pnpm/framer-motion@12.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
const K = ({
  asset: e,
  size: i,
  actions: v,
  isLoading: m,
  hideSize: k = !1,
  hideExtension: y = !1
}) => {
  const S = g(), u = g(), r = x(null), o = E({}), { isOpen: s, focusStrategy: N } = o, { menuTriggerProps: A } = W({}, o, r), { buttonProps: F } = D(A, r), { isFocusVisible: w, focusProps: C } = I(), d = x(null), { overlayProps: T } = L(
    { onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: s, isDismissable: !0 },
    d
  ), f = (e == null ? void 0 : e.name) || "Your Asset", [O, P] = Y(0);
  return U(() => {
    let c = null;
    const R = () => {
      var b;
      const j = ((b = r.current) == null ? void 0 : b.getBoundingClientRect().width) ?? 0;
      c = setTimeout(() => P(j), 0);
    }, p = new ResizeObserver(R);
    return r.current && p.observe(r.current), () => {
      c && clearTimeout(c), 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",
            ...z(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",
              w && _,
              i === a.Large ? "tw-h-[11.5rem] tw-flex-col" : "tw-h-14",
              s || w ? "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",
                    i === a.Large ? "tw-w-full tw-h-32" : "tw-w-14 tw-h-full"
                  ]),
                  children: /* @__PURE__ */ t(G, { size: i })
                }
              ),
              e && /* @__PURE__ */ t($, { asset: e, size: i, isActive: s || w }),
              /* @__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",
                    i === 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",
                            (s || w) && "tw-font-medium"
                          ]),
                          children: f
                        }
                      ),
                      /* @__PURE__ */ t(
                        q,
                        {
                          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",
                          s ? "tw-rotate-180 tw-text-black-90" : "tw-text-black-60"
                        ]),
                        children: /* @__PURE__ */ t(B, { size: 16 })
                      }
                    ) })
                  ]
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ t(J, { children: s && /* @__PURE__ */ t(
          H.div,
          {
            style: {
              width: O
            },
            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(M, { restoreFocus: !0, children: /* @__PURE__ */ l("div", { ...T, ref: d, children: [
              /* @__PURE__ */ t(h, { onDismiss: () => o.close() }),
              /* @__PURE__ */ t(
                V,
                {
                  menuBlocks: v,
                  focus: N ?? void 0,
                  onClick: () => o.close()
                }
              ),
              /* @__PURE__ */ t(h, { onDismiss: () => o.close() })
            ] }) })
          },
          `asset-input-menu-${S}`
        ) })
      ]
    }
  );
};
K.displayName = "FondueSelectedAsset";
export {
  K as SelectedAsset
};
//# sourceMappingURL=SelectedAsset.es.js.map
