const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
let react = require("react");
react = require_runtime.__toESM(react);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./index.less");
//#region src/pro/PersistentBottomSheet/index.tsx
const DEFAULT_MAX_HEIGHT = "95dvh";
const TRANSITION_MS = 240;
const getBodyScaleY = () => {
	if (typeof window === "undefined" || typeof document === "undefined") return 1;
	const transform = window.getComputedStyle(document.body).transform;
	if (!transform || transform === "none") return 1;
	return new DOMMatrixReadOnly(transform).d || 1;
};
const getViewportHeight = () => {
	var _window$visualViewpor;
	if (typeof window === "undefined") return 0;
	return (((_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.height) || window.innerHeight) / getBodyScaleY();
};
const resolveHeight = (height, viewportHeight) => {
	if (typeof height === "number") return height;
	if (!height) return Math.floor(viewportHeight * .95);
	const normalizedHeight = height.trim();
	const value = Number.parseFloat(normalizedHeight);
	if (!Number.isFinite(value)) return Math.floor(viewportHeight * .95);
	if (normalizedHeight.endsWith("px")) return value;
	if (normalizedHeight.endsWith("%") || normalizedHeight.endsWith("vh") || normalizedHeight.endsWith("dvh")) return Math.floor(viewportHeight * value / 100);
	return value;
};
/**
* A bottom-aligned sheet that keeps header and footer visible while collapsing
* only the body area. Header/footer heights are measured so footer growth
* automatically reduces the available body height.
*/
const PersistentBottomSheet = (props) => {
	const { open, defaultOpen = false, onOpenChange, afterOpenChange, onClose, className, style, header, footer, children, classNames, styles, maxHeight = DEFAULT_MAX_HEIGHT, mask = false, maskClosable = true, destroyOnHidden = false, zIndex = 101 } = props;
	const isControlled = open !== void 0;
	const [innerOpen, setInnerOpen] = (0, react.useState)(defaultOpen);
	const mergedOpen = isControlled ? !!open : innerOpen;
	const [bodyRendered, setBodyRendered] = (0, react.useState)(() => !destroyOnHidden || mergedOpen);
	const lastAfterOpenRef = (0, react.useRef)(mergedOpen);
	const headerRef = (0, react.useRef)(null);
	const footerRef = (0, react.useRef)(null);
	const [viewportHeight, setViewportHeight] = (0, react.useState)(getViewportHeight);
	const [headerHeight, setHeaderHeight] = (0, react.useState)(0);
	const [footerHeight, setFooterHeight] = (0, react.useState)(0);
	const updateOpen = (0, react.useCallback)((nextOpen) => {
		if (!isControlled) setInnerOpen(nextOpen);
		onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
	}, [isControlled, onOpenChange]);
	(0, react.useEffect)(() => {
		var _window$visualViewpor2;
		const updateViewportHeight = () => {
			setViewportHeight(getViewportHeight());
		};
		updateViewportHeight();
		window.addEventListener("resize", updateViewportHeight);
		(_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.addEventListener("resize", updateViewportHeight);
		return () => {
			var _window$visualViewpor3;
			window.removeEventListener("resize", updateViewportHeight);
			(_window$visualViewpor3 = window.visualViewport) === null || _window$visualViewpor3 === void 0 || _window$visualViewpor3.removeEventListener("resize", updateViewportHeight);
		};
	}, []);
	(0, react.useEffect)(() => {
		if (!destroyOnHidden || mergedOpen) setBodyRendered(true);
	}, [destroyOnHidden, mergedOpen]);
	(0, react.useEffect)(() => {
		if (typeof ResizeObserver === "undefined") {
			var _headerRef$current, _footerRef$current;
			setHeaderHeight(((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight) || 0);
			setFooterHeight(((_footerRef$current = footerRef.current) === null || _footerRef$current === void 0 ? void 0 : _footerRef$current.offsetHeight) || 0);
			return;
		}
		const updateFixedHeight = () => {
			var _headerRef$current2, _footerRef$current2;
			setHeaderHeight(((_headerRef$current2 = headerRef.current) === null || _headerRef$current2 === void 0 ? void 0 : _headerRef$current2.offsetHeight) || 0);
			setFooterHeight(((_footerRef$current2 = footerRef.current) === null || _footerRef$current2 === void 0 ? void 0 : _footerRef$current2.offsetHeight) || 0);
		};
		const resizeObserver = new ResizeObserver(() => {
			updateFixedHeight();
		});
		if (headerRef.current) resizeObserver.observe(headerRef.current);
		if (footerRef.current) resizeObserver.observe(footerRef.current);
		updateFixedHeight();
		return () => {
			resizeObserver.disconnect();
		};
	}, [footer, header]);
	const maxHeightValue = (0, react.useMemo)(() => resolveHeight(maxHeight, viewportHeight), [maxHeight, viewportHeight]);
	const fixedHeight = headerHeight + footerHeight;
	const availableBodyHeight = Math.max(0, maxHeightValue - fixedHeight);
	const bodyHeight = mergedOpen ? availableBodyHeight : 0;
	const sheetStyle = (0, react.useMemo)(() => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, style), {}, {
		zIndex,
		maxHeight: "var(--pisell-bottom-sheet-max-height)",
		"--pisell-bottom-sheet-max-height": `${maxHeightValue}px`,
		"--pisell-bottom-sheet-body-height": `${bodyHeight}px`,
		"--pisell-bottom-sheet-transition-duration": `${TRANSITION_MS}ms`
	}), [
		bodyHeight,
		maxHeightValue,
		style,
		zIndex
	]);
	const handleMaskClick = (event) => {
		if (!maskClosable) return;
		onClose === null || onClose === void 0 || onClose(event);
		updateOpen(false);
	};
	const handleBodyTransitionEnd = (event) => {
		if (event.currentTarget !== event.target || event.propertyName !== "height") return;
		if (destroyOnHidden && !mergedOpen) setBodyRendered(false);
		if (lastAfterOpenRef.current !== mergedOpen) {
			lastAfterOpenRef.current = mergedOpen;
			afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(mergedOpen);
		}
	};
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, mask && mergedOpen ? /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: (0, classnames.default)("pisell-persistent-bottom-sheet-mask", classNames === null || classNames === void 0 ? void 0 : classNames.mask),
		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, styles === null || styles === void 0 ? void 0 : styles.mask), {}, { zIndex: zIndex - 1 }),
		"aria-label": "Close",
		onClick: handleMaskClick
	}) : null, /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-persistent-bottom-sheet", className, { "pisell-persistent-bottom-sheet-open": mergedOpen }),
		style: sheetStyle
	}, header ? /* @__PURE__ */ react.default.createElement("div", {
		ref: headerRef,
		className: (0, classnames.default)("pisell-persistent-bottom-sheet-header", classNames === null || classNames === void 0 ? void 0 : classNames.header),
		style: styles === null || styles === void 0 ? void 0 : styles.header
	}, header) : /* @__PURE__ */ react.default.createElement("div", { ref: headerRef }), /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-persistent-bottom-sheet-body", classNames === null || classNames === void 0 ? void 0 : classNames.body),
		style: styles === null || styles === void 0 ? void 0 : styles.body,
		"aria-hidden": !mergedOpen,
		onTransitionEnd: handleBodyTransitionEnd
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-persistent-bottom-sheet-body-inner" }, bodyRendered ? children : null)), footer ? /* @__PURE__ */ react.default.createElement("div", {
		ref: footerRef,
		className: (0, classnames.default)("pisell-persistent-bottom-sheet-footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
		style: styles === null || styles === void 0 ? void 0 : styles.footer
	}, footer) : /* @__PURE__ */ react.default.createElement("div", { ref: footerRef })));
};
//#endregion
exports.default = PersistentBottomSheet;
