import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import React, { useLayoutEffect, useMemo } from "react";
import { isBoolean, isUndefined } from "@pisell/utils";
import { Drawer } from "antd";
import classNames from "classnames";
import XClose from "@pisell/icon/es/XClose";
import { useControllableValue, useUpdateEffect } from "ahooks";
import Pin02 from "@pisell/icon/es/Pin02";
import "./index.less";
//#region src/components/drawer/index.tsx
const _excluded = ["others"];
const prefix = "pisell-lowcode-";
const Title = (props) => {
	const { placement, onClose, showPin, persistentState, setPersistentState } = props;
	return /* @__PURE__ */ React.createElement("div", { className: `${prefix}drawer-outside-wrap ${prefix}drawer-outside-wrap-${placement}` }, /* @__PURE__ */ React.createElement("div", {
		className: `${prefix}drawer-outside-action-wrap`,
		onClick: onClose
	}, /* @__PURE__ */ React.createElement(XClose, null)), showPin && /* @__PURE__ */ React.createElement("div", {
		className: classNames(`${prefix}drawer-outside-action-wrap`, { [`${prefix}drawer-outside-action-active`]: persistentState }),
		onClick: () => setPersistentState(!persistentState)
	}, /* @__PURE__ */ React.createElement(Pin02, null)));
};
const Drawer$1 = (props) => {
	const { others } = props, resetProps = _objectWithoutProperties(props, _excluded);
	const { operateMode, headerStyle, placement, onClose, showPin, width, getContainer, open } = props;
	const [persistentState, setPersistentState] = useControllableValue(props, {
		trigger: "onPersistentChange",
		valuePropName: "persistent"
	});
	const storageKey = `drawer-${props.__id}`;
	const innerProps = {};
	if (props.__designMode === "design") innerProps.open = true;
	useLayoutEffect(() => {
		if (isBoolean(persistentState) && isUndefined(getContainer) && showPin) {
			document.body.style.transition = "all 0.3s";
			document.body.style[`padding-${placement}`] = persistentState && open ? `${width || 378}px` : "0";
		}
		return () => {
			document.body.style[`padding-${placement}`] = "0";
			document.body.style.transition = "none";
		};
	}, [
		persistentState,
		width,
		showPin,
		placement,
		open
	]);
	useUpdateEffect(() => {
		if (isBoolean(persistentState) && showPin) localStorage.setItem(storageKey, `${persistentState}`);
	}, [
		persistentState,
		storageKey,
		showPin
	]);
	useLayoutEffect(() => {
		if (!isBoolean(persistentState) && showPin) setPersistentState(localStorage.getItem(storageKey) === "true");
	}, [
		persistentState,
		storageKey,
		showPin
	]);
	const otherProps = useMemo(() => {
		if (operateMode === "outside") return {
			headerStyle: {
				border: "none",
				height: 0,
				padding: 0
			},
			title: /* @__PURE__ */ React.createElement(Title, {
				placement,
				onClose,
				showPin,
				persistentState,
				setPersistentState
			})
		};
		return _objectSpread2({
			rootClassName: `${prefix}basic-drawer-root`,
			closeIcon: /* @__PURE__ */ React.createElement(XClose, { className: `${prefix}drawer-header-close-icon` })
		}, headerStyle);
	}, [
		operateMode,
		placement,
		onClose,
		persistentState,
		setPersistentState
	]);
	return /* @__PURE__ */ React.createElement(Drawer, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, resetProps), innerProps), otherProps), others));
};
//#endregion
export { Drawer$1 as default };
