const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index = require("../iconfont/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let ahooks = require("ahooks");
require("./index.less");
//#region src/components/pisellFloatingPanel/index.tsx
const PisellFloatingPanel = (props) => {
	const { defaultOpen = false, onOpenChange, isFloat, open, width, children, retractHeight, fullHeight, retractSlot, style: propsStyle, retractIconStyle } = props;
	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
	(0, ahooks.useUpdateEffect)(() => {
		if (open !== void 0) setIsOpen(open);
	}, [open]);
	(0, react.useEffect)(() => {
		document.body.id = "body";
	}, []);
	const togglePanel = () => {
		const newOpenState = !isOpen;
		setIsOpen(newOpenState);
		if (onOpenChange) onOpenChange(newOpenState);
	};
	const style = (0, react.useMemo)(() => {
		let height = fullHeight;
		let transform = isOpen ? "translateY(0)" : `translateY(calc(100% - ${retractHeight}))`;
		if (!isFloat) {
			height = isOpen ? fullHeight : retractHeight;
			transform = "none";
		}
		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, propsStyle), {}, {
			height,
			width,
			position: isFloat ? "fixed" : "relative",
			bottom: 0,
			transition: "0.3s",
			transform
		});
	}, [
		fullHeight,
		isFloat,
		retractHeight,
		isOpen,
		width,
		propsStyle
	]);
	const iconType = (0, react.useMemo)(() => {
		if (isOpen) return isFloat ? "pisell2-chevron-down-double" : "pisell2-chevron-up-double";
		return isFloat ? "pisell2-chevron-up-double" : "pisell2-chevron-down-double";
	}, [isOpen, isFloat]);
	return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-lowcode-floating-panel-wrap", { ["pisell-lowcode-floating-panel-wrap-floating"]: isFloat }),
		style
	}, /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-lowcode-floating-panel-header",
		onClick: togglePanel
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-floating-panel-handle" }, /* @__PURE__ */ react.default.createElement(require_index.default, {
		type: iconType,
		style: retractIconStyle
	}))), !isOpen && retractSlot, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-floating-panel-content" }, children));
};
//#endregion
exports.default = PisellFloatingPanel;
