/**
 * 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.
 */

import { __toESM } from "../../../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../../../node_modules/classnames/index.js";
import { useIsomorphicEffect } from "../../../../global/js/hooks/useIsomorphicEffect.js";
import { getDevtoolsProps } from "../../../../global/js/utils/devtools.js";
import { CoachmarkContext, blockClass } from "./context.js";
import CoachmarkContent from "./CoachmarkContent.js";
import { ContentHeader } from "./ContentHeader.js";
import ContentBody from "./ContentBody.js";
import React, { forwardRef, useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { Popover } from "@carbon/react";

//#region src/components/Coachmark/next/Coachmark/Coachmark.tsx
/**
* Copyright IBM Corp. 2024, 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__ */ __toESM(require_classnames());
const componentName = "Coachmark";
/**
* 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.
*/
const Coachmark = forwardRef((props, ref) => {
	const { children, className, onClose, align = "bottom", open, position = {
		x: 0,
		y: 0
	}, floating, dropShadow, highContrast, caret, selectorPrimaryFocus, ...rest } = props;
	const triggerRef = useRef(null);
	const internalRef = useRef(null);
	const [contentRef, setContentRef] = useState(null);
	const [openState, setOpenState] = useState(false);
	const setOpen = (value) => {
		if (!value) onClose?.();
		if (open === void 0) setOpenState(value);
	};
	const currentOpen = open ?? openState;
	const caretValue = caret !== void 0 ? caret : floating === true ? false : true;
	useEffect(() => {
		const container = internalRef.current;
		if (!container) return;
		const firstFocusable = Array.from(container.querySelectorAll("*")).find((el) => el.tabIndex >= 0 && !el.hasAttribute("disabled"));
		if (firstFocusable) triggerRef.current = firstFocusable;
	}, [children]);
	useEffect(() => {
		const el = triggerRef.current;
		if (el) el.setAttribute("aria-expanded", String(!!open));
	}, [open]);
	useEffect(() => {
		if (!open && contentRef && floating) {
			contentRef.style.transform = "none";
			contentRef.style.left = "0px";
			contentRef.style.top = "0px";
		}
	}, [
		open,
		contentRef,
		floating
	]);
	useIsomorphicEffect(() => {
		const { x = 0, y = 0 } = position ?? {};
		const el = internalRef.current;
		if (el && (x !== 0 || y !== 0)) el.style.transform = `translate(${x}px, ${y}px)`;
	}, [position]);
	const setRef = (node) => {
		internalRef.current = node;
		if (typeof ref === "function") ref(node);
		else if (ref) ref.current = node;
	};
	const handleRequestClose = (event) => {
		if (floating) return;
		onClose?.();
		setOpen(false);
	};
	return /* @__PURE__ */ React.createElement(CoachmarkContext.Provider, { value: {
		onClose,
		open: currentOpen,
		setOpen,
		align,
		triggerRef,
		position,
		contentRef,
		setContentRef,
		floating,
		selectorPrimaryFocus
	} }, /* @__PURE__ */ React.createElement("div", {
		...rest,
		ref: setRef,
		className: (0, import_classnames.default)(blockClass, className, { [`${blockClass}--floating`]: floating }),
		...getDevtoolsProps(componentName)
	}, /* @__PURE__ */ React.createElement(Popover, {
		open: currentOpen,
		onRequestClose: handleRequestClose,
		align,
		caret: caretValue,
		highContrast: highContrast ?? true,
		dropShadow
	}, children)));
});
Coachmark.Content = CoachmarkContent;
Coachmark.Content.Header = ContentHeader;
Coachmark.Content.Body = ContentBody;
Coachmark.displayName = componentName;
Coachmark.propTypes = {
	align: PropTypes.string,
	caret: PropTypes.bool,
	children: PropTypes.node.isRequired,
	className: PropTypes.string,
	dropShadow: PropTypes.bool,
	floating: PropTypes.bool,
	highContrast: PropTypes.bool,
	onClose: PropTypes.func,
	open: PropTypes.bool,
	position: PropTypes.shape({
		x: PropTypes.number,
		y: PropTypes.number
	}),
	selectorPrimaryFocus: PropTypes.string
};

//#endregion
export { Coachmark };