/**
 * Copyright IBM Corp. 2020, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_useIsomorphicEffect = require("../../global/js/hooks/useIsomorphicEffect.js");
const require_devtools = require("../../global/js/utils/devtools.js");
require("../Coachmark/utils/enums.js");
const require_context = require("../Coachmark/utils/context.js");
const require_CoachmarkOverlay = require("../Coachmark/CoachmarkOverlay.js");
const require_CoachmarkTagline = require("../Coachmark/CoachmarkTagline.js");
const require_CoachmarkStackHome = require("./CoachmarkStackHome.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_dom = require("react-dom");
//#region src/components/CoachmarkStack/CoachmarkStack.tsx
/**
* Copyright IBM Corp. 2023, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--coachmark-stack`;
const componentName = "CoachmarkStack";
const elementBlockClass = `${require_settings.pkg.prefix}--coachmark-stack-element`;
const defaults = {
	onClose: () => {},
	theme: "light",
	portalTarget: "body"
};
/**
* Stacked coachmarks are used to call out specific functionality or concepts
* within the UI that may not be intuitive but are important for the
* user to gain understanding of the product's main value and discover new use cases.
* This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
* @deprecated This component is deprecated.
*/
const CoachmarkStack = react.default.forwardRef(({ children, className, onClose = defaults.onClose, description, renderMedia, navLinkLabels, portalTarget = defaults.portalTarget, closeButtonLabel, tagline, theme = defaults.theme, title, tooltipAlign, closeIconDescription, ...rest }, ref) => {
	const portalNode = (0, react.useRef)(null);
	require_useIsomorphicEffect.useIsomorphicEffect(() => {
		portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector("body") : document?.querySelector("body");
	}, [portalTarget]);
	const stackHomeRef = (0, react.useRef)(null);
	const stackedCoachmarkRefs = (0, react.useRef)([]);
	const [isOpen, setIsOpen] = (0, react.useState)(false);
	const [selectedItemNumber, setSelectedItemNumber] = (0, react.useState)(0);
	const [parentHeight, setParentHeight] = (0, react.useState)();
	const childArray = react.Children.toArray(children);
	const mountedRef = (0, react.useRef)(void 0);
	const delayMs = 240;
	const handleClickNavItem = (itemNumber) => {
		setSelectedItemNumber(itemNumber);
	};
	const handleClose = (0, react.useCallback)((isParentCloseButton) => {
		if (isParentCloseButton) {
			setSelectedItemNumber(-1);
			const timer = setTimeout(() => {
				setIsOpen(false);
				onClose();
			}, delayMs);
			return () => clearTimeout(timer);
		} else setSelectedItemNumber(0);
	}, [onClose]);
	const escFunction = (0, react.useCallback)((event) => {
		if (event.key === "Escape") if (selectedItemNumber === 0) handleClose(true);
		else handleClose(false);
	}, [handleClose, selectedItemNumber]);
	(0, react.useEffect)(() => {
		document.addEventListener("keydown", escFunction, false);
		return () => {
			document.removeEventListener("keydown", escFunction, false);
		};
	}, [escFunction]);
	const contextValue = {
		buttonProps: {
			tabIndex: 0,
			"aria-expanded": isOpen,
			onClick: () => {
				setIsOpen(true);
			},
			onDoubleClick: () => {
				setIsOpen(true);
			}
		},
		closeButtonProps: { onClick: () => handleClose(false) },
		isOpen,
		closeIconDescription
	};
	(0, react.useEffect)(() => {
		mountedRef.current = true;
		return () => {
			mountedRef.current = false;
		};
	}, []);
	(0, react.useEffect)(() => {
		const targetSelectedItem = selectedItemNumber - 1;
		if (!parentHeight) {
			if (stackHomeRef.current) {
				const height = stackHomeRef.current.clientHeight;
				if (height > 0) setParentHeight(height);
			}
			return;
		}
		if (stackHomeRef.current) stackHomeRef.current.style.height = `${parentHeight}px`;
		if (!isOpen || targetSelectedItem < 0) {
			if (stackHomeRef.current) {
				stackHomeRef.current.classList.remove(`${blockClass}--scaled-home`);
				stackHomeRef.current.classList.add(`${blockClass}--unscaled-home`);
				stackHomeRef.current.focus();
			}
			return;
		}
		const targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
		if (stackHomeRef.current) {
			stackHomeRef.current.style.height = `calc(${targetHomeHeight}px + 3rem)`;
			stackedCoachmarkRefs.current[targetSelectedItem].focus();
			stackHomeRef.current.classList.remove(`${blockClass}--unscaled-home`);
			stackHomeRef.current.classList.add(`${blockClass}--scaled-home`);
		}
	}, [
		selectedItemNumber,
		isOpen,
		parentHeight
	]);
	const wrappedChildren = react.Children.map(childArray, (child, idx) => {
		const mountedClass = mountedRef.current ? `${elementBlockClass}--is-mounted` : "";
		return /* @__PURE__ */ react.default.createElement(require_CoachmarkOverlay.CoachmarkOverlay, {
			key: idx,
			ref: (ref) => {
				stackedCoachmarkRefs.current[idx] = ref;
			},
			kind: "stacked",
			onClose: () => handleClose(false),
			theme,
			fixedIsVisible: false,
			className: (0, import_classnames.default)(elementBlockClass, mountedClass, idx === selectedItemNumber - 1 && `${elementBlockClass}--is-visible`, mountedRef.current && `${elementBlockClass}--is-mounted`)
		}, child);
	});
	return /* @__PURE__ */ react.default.createElement(require_context.CoachmarkContext.Provider, { value: contextValue }, /* @__PURE__ */ react.default.createElement("div", {
		...rest,
		className: (0, import_classnames.default)(blockClass, `${require_settings.pkg.prefix}--coachmark-overlay--stack`, className),
		ref,
		...require_devtools.getDevtoolsProps(componentName)
	}, /* @__PURE__ */ react.default.createElement(require_CoachmarkTagline.CoachmarkTagline, {
		title: tagline,
		onClose
	}), /* @__PURE__ */ react.default.createElement(require_CoachmarkStackHome.CoachmarkStackHome, {
		ref: stackHomeRef,
		className: (0, import_classnames.default)(`${require_settings.pkg.prefix}--coachmark-overlay`, `${require_settings.pkg.prefix}--coachmark-overlay__${theme}`, elementBlockClass, selectedItemNumber > 0 && `${elementBlockClass}--is-stacked`, selectedItemNumber > 0 && `${elementBlockClass}--is-stacked__${theme}`, isOpen && `${elementBlockClass}--is-visible`, mountedRef.current && `${elementBlockClass}--is-mounted`),
		isOpen: isOpen && selectedItemNumber < 1,
		description,
		renderMedia,
		navLinkLabels,
		onClickNavItem: handleClickNavItem,
		onClose: () => {
			handleClose(true);
		},
		portalTarget,
		closeButtonLabel,
		title,
		tooltipAlign
	}), portalNode?.current ? (0, react_dom.createPortal)(wrappedChildren, portalNode?.current) : null));
});
/**@ts-ignore*/
CoachmarkStack.deprecated = {
	level: "warn",
	details: `${componentName} is deprecated.`
};
CoachmarkStack.displayName = componentName;
CoachmarkStack.propTypes = {
	/**
	* CoachmarkStack should use a single CoachmarkOverlayElements component as a child.
	*/
	children: prop_types.default.node.isRequired,
	/**
	* Provide an optional class to be applied to the containing node.
	*/
	className: prop_types.default.string,
	/**
	* The label for the button that will close the Stack
	*/
	closeButtonLabel: prop_types.default.string,
	/**
	* Tooltip text and aria label for the Close button icon.
	*/
	closeIconDescription: prop_types.default.string,
	/**
	* The description of the Coachmark.
	*/
	description: prop_types.default.node.isRequired,
	/**
	* The labels used to link to the stackable Coachmarks.
	*/
	navLinkLabels: prop_types.default.arrayOf(prop_types.default.string.isRequired).isRequired,
	/**
	* Function to call when the CoachmarkStack closes.
	*/
	onClose: prop_types.default.func,
	/**
	* Where in the DOM to render the stack.
	* The default is `document.body`.
	*/
	portalTarget: prop_types.default.string,
	/**
	* Optional prop to render any media like images or animated media.
	*/
	renderMedia: prop_types.default.func,
	/**
	* The tagline title which will be fixed to the bottom right of the window and will serve as the display trigger.
	*/
	tagline: prop_types.default.string.isRequired,
	/**
	* Determines the theme of the component.
	*/
	theme: prop_types.default.oneOf(["light", "dark"]),
	/**
	* The title of the Coachmark.
	*/
	title: prop_types.default.string.isRequired,
	/**
	* Label's tooltip position
	*/
	tooltipAlign: prop_types.default.oneOf(["top", "bottom"])
};
//#endregion
exports.CoachmarkStack = CoachmarkStack;
