import { jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { Modal } from "../Modal/index.js";
/* empty css                        */
function BottomSheet({
  open,
  onClose,
  title,
  children,
  className,
  footerOptions,
  maxHeight = "calc(100vh - 64px)",
  withExpandIcon = false,
  onExpand,
  ...props
}) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [contentHeight, setContentHeight] = useState("auto");
  const handleExpandClick = () => {
    const next = !isExpanded;
    setIsExpanded(next);
    onExpand == null ? void 0 : onExpand(next);
  };
  useEffect(() => {
    if (!open) return;
    const timeout = setTimeout(() => {
      const bodyEl = document.querySelector(".ia_modalBody");
      const scrollHeight = bodyEl instanceof HTMLElement ? bodyEl.scrollHeight : 0;
      const height = scrollHeight + 105;
      const numMax = typeof maxHeight === "number" ? maxHeight : null;
      const cappedHeight = numMax != null && height > numMax ? `${numMax}px` : `${height}px`;
      setContentHeight(cappedHeight);
    }, 0);
    return () => {
      clearTimeout(timeout);
    };
  }, [open, children, maxHeight]);
  const hasFooter = footerOptions != null && (typeof footerOptions !== "object" || typeof footerOptions === "object" && Object.keys(footerOptions).length > 0);
  const mergedClassName = [
    "bottom-sheet",
    isExpanded ? "expanded" : "",
    hasFooter ? "with-footer" : "",
    className ?? ""
  ].filter(Boolean).join(" ");
  return /* @__PURE__ */ jsx(
    Modal,
    {
      isBottomSheet: true,
      className: mergedClassName,
      footerOptions,
      height: !withExpandIcon ? contentHeight : void 0,
      isExpanded,
      maxHeight: !withExpandIcon ? maxHeight : void 0,
      open,
      title,
      withExpandIcon,
      onClose,
      onExpand: withExpandIcon ? handleExpandClick : void 0,
      ...props,
      children
    }
  );
}
BottomSheet.displayName = "BottomSheet";
export {
  BottomSheet
};
