import { jsxs as n, Fragment as I, jsx as e } from "react/jsx-runtime";
import { useState as g, useEffect as M } from "react";
import { createPortal as j } from "react-dom";
import { motion as R } from "motion/react";
import { isFunction as V } from "es-toolkit/predicate";
import f from "../../utils/classNames.js";
import { getOrCreatePortalRoot as _ } from "../../utils/portalRoot.js";
const $ = -1e3, r = 15, J = (u) => {
  const {
    show: o = !1,
    onClose: l,
    width: w,
    height: h,
    title: c,
    detach: s = !1,
    detachOffset: A = r,
    hasBackdrop: x = !1,
    showCloseButton: N = !0,
    showMaximizeButton: y = !1,
    onHeightChange: C = () => {
    },
    bodyRef: v,
    bodyClassName: d,
    className: m,
    children: k,
    onBackdropClick: B = () => {
    },
    ...F
  } = u, [t, p] = g(o), [i, S] = g(!1);
  M(() => p(o), [o]);
  const O = _(), b = () => {
    const a = !t;
    V(l) ? l(a) : p(a);
  }, H = () => {
    B(), b();
  }, P = () => {
    S(!i), C();
  }, T = f(
    "bottom-sheet",
    "position-fixed left-0",
    !h && !i && "height-auto",
    "bg-white",
    "shadow-hard",
    s ? "rounded" : "rounded-top-left rounded-top-right",
    m && m
  ), z = f("bottom-sheet-body", "height-100pct", d && d), E = i ? window.innerHeight : h;
  return j(
    /* @__PURE__ */ n(I, { children: [
      /* @__PURE__ */ n(
        R.div,
        {
          ...F,
          className: T,
          style: {
            width: w,
            maxWidth: s ? `calc(100% - ${r * 2}px)` : "100%",
            margin: s ? `${r}px` : 0
          },
          initial: { opacity: 0 },
          animate: {
            opacity: t ? 1 : 0,
            y: 0,
            bottom: t ? 0 : $,
            height: t ? E : 0
          },
          children: [
            /* @__PURE__ */ n("div", { className: "bottom-sheet-header", children: [
              c && /* @__PURE__ */ e(
                "div",
                {
                  className: "bottom-sheet-title display-flex justify-content-between padding-15 border border-top-none border-left-none border-right-none border-color-lighter",
                  children: /* @__PURE__ */ e("div", { className: "text-size-18", children: c })
                }
              ),
              N && /* @__PURE__ */ e("div", { className: "bottom-sheet-close position-absolute top-10 right-10", children: /* @__PURE__ */ e("button", { type: "button", className: "btn btn-muted btn-sm btn-icon-only", onClick: b, children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove" }) }) }),
              y && /* @__PURE__ */ e(
                "div",
                {
                  className: "bottom-sheet-maximize height-30 position-absolute top-5 left-50pct translate-x-50 cursor-pointer",
                  onClick: P,
                  children: /* @__PURE__ */ e("div", { className: "height-5 width-40 rounded bg-lighter" })
                }
              )
            ] }),
            /* @__PURE__ */ e("div", { className: z, ref: v, children: t && k })
          ]
        }
      ),
      x && t && /* @__PURE__ */ e("div", { className: "bottom-sheet-backdrop", onClick: H })
    ] }),
    O
  );
};
export {
  J as default
};
//# sourceMappingURL=BottomSheet.js.map
