import { n as AnalyticsId } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { n as mergeRefs } from "../../refs.js";
import { t as ChevronDown_default } from "../../ChevronDown.js";
import { t as ChevronUp_default } from "../../ChevronUp.js";
import { t as Highlighter_default } from "../../Highlighter.js";
import { i as renderElementHeader } from "../../ElementHeader.js";
import { t as useExpand } from "../../useExpand.js";
import { t as isElementInViewport } from "../../viewport.js";
import { n as listEditModeWrapperClassnames, t as ListEditMode_default } from "../../ListEditMode.js";
import classNames from "classnames";
import React, { useEffect, useId, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import expanderListStyles from "./styles.module.scss";
const Expander = (props) => {
	const { id, children, padding = true, color = "neutral", className = "", icon, large = false, title, titleHtmlMarkup = "span", expanded = false, testId, handleExpanderClick, onExpand, renderChildrenWhenClosed, variant = "line", zIndex = 0, highlightText, status = "none", editMode = false, ref } = props;
	const [isExpanded] = useExpand(expanded, onExpand);
	const expanderRef = useRef(null);
	const triggerRef = useRef(null);
	const { isHovered, isFocused } = usePseudoClasses(triggerRef);
	const isFill = variant === "fill";
	const isFillNegative = variant === "fill-negative";
	const isOutline = variant === "outline";
	const isLine = variant === "line";
	const itemClasses = classNames(className, expanderListStyles["expander-list__item"], {
		[expanderListStyles[`expander-list__item--fill`]]: isFill,
		[expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,
		[expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,
		[expanderListStyles[`expander-list__item--fill-negative--${color}`]]: isFillNegative,
		[expanderListStyles["expander-list__item--outline"]]: isOutline,
		[expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,
		[expanderListStyles["expander-list__item--line"]]: isLine,
		[expanderListStyles[`expander-list__item--line--${color}`]]: isLine,
		[expanderListStyles[`expander-list__item--new`]]: status === "new"
	});
	const expanderClasses = classNames(expanderListStyles["expander-list-link"], expanderListStyles[`expander-list-link--${color}`], {
		[expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,
		[expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,
		[expanderListStyles[`expander-list-link--fill-negative--${color}`]]: isFillNegative,
		[expanderListStyles["expander-list-link--outline"]]: isOutline,
		[expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,
		[expanderListStyles[`expander-list-link--line--${color}`]]: isLine,
		[expanderListStyles["expander-list-link--open"]]: isExpanded,
		[expanderListStyles["expander-list-link--large"]]: large,
		[expanderListStyles[`expander-list-link--new`]]: status === "new"
	});
	const renderContent = () => {
		if (!renderChildrenWhenClosed && !isExpanded) return null;
		return /* @__PURE__ */ jsx("div", {
			className: classNames(expanderListStyles["expander-list-link__main-content"], {
				[expanderListStyles["expander-list-link__main-content--expanded"]]: isExpanded,
				[expanderListStyles["expander-list-link__main-content--padding"]]: padding,
				[expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,
				[expanderListStyles[`expander-list-link__main-content--new`]]: status === "new"
			}),
			"data-state": isExpanded ? "open" : "closed",
			children: /* @__PURE__ */ jsx(Highlighter_default, {
				searchText: highlightText,
				children
			})
		});
	};
	const statusMarkerClasses = classNames(expanderListStyles["expander-list__item__status-marker"], { [expanderListStyles["expander-list__item__status-marker--new"]]: status === "new" });
	return /* @__PURE__ */ jsx(Fragment, { children: editMode ? /* @__PURE__ */ jsxs("div", {
		className: itemClasses,
		children: [status !== "none" && /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }), /* @__PURE__ */ jsx("div", {
			id,
			"data-testid": testId,
			"data-analyticsid": AnalyticsId.ExpanderListExpander,
			className: expanderClasses,
			children: renderElementHeader(title, {
				titleHtmlMarkup,
				isHovered: false,
				size: large ? "large" : "medium",
				parentType: "expanderlist",
				chevronIcon: void 0,
				icon,
				highlightText
			})
		})]
	}) : /* @__PURE__ */ jsxs("li", {
		className: itemClasses,
		ref: mergeRefs([ref, expanderRef]),
		children: [
			status !== "none" && /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }),
			/* @__PURE__ */ jsx("button", {
				type: "button",
				id,
				onClick: handleExpanderClick,
				"data-testid": testId,
				"data-analyticsid": AnalyticsId.ExpanderListExpander,
				className: expanderClasses,
				ref: triggerRef,
				"aria-expanded": isExpanded,
				style: { zIndex: isFocused ? zIndex + 1 : zIndex },
				children: renderElementHeader(title, {
					titleHtmlMarkup,
					isHovered: isHovered || isFocused,
					size: large ? "large" : "medium",
					parentType: "expanderlist",
					chevronIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
					icon,
					highlightText
				})
			}),
			renderContent()
		]
	}) });
};
var isExpanderComponent = (element) => React.isValidElement(element) && element.type === Expander;
var ExpanderListComponent = (props) => {
	const { children, childPadding = true, large, renderChildrenWhenClosed = false, color = "white", className = "", accordion = false, testId, variant, zIndex, highlightText, editMode = false, ref } = props;
	const [prevChildren, setPrevChildren] = useState(children);
	const [activeExpander, setActiveExpander] = useState();
	const [latestExpander, setLatestExpander] = useState();
	const expanderIdBase = useId();
	const expanderListClasses = classNames(expanderListStyles["expander-list"], className, {
		[expanderListStyles[`expander-list--outline--${color}`]]: variant === "outline",
		[expanderListStyles[`expander-list--fill`]]: variant === "fill" || variant === "fill-negative",
		[listEditModeWrapperClassnames]: editMode
	});
	function handleExpanderClick(event, id) {
		setActiveExpander((prevState) => accordion ? { [id]: !prevState?.[id] } : {
			...prevState,
			[id]: !prevState?.[id]
		});
		setLatestExpander(event.currentTarget);
	}
	const getExpanderId = (index) => `${expanderIdBase}-${index}`;
	useEffect(() => {
		if (accordion && latestExpander && !isElementInViewport(latestExpander)) latestExpander.scrollIntoView();
	}, [accordion, latestExpander]);
	const getExpanderStateFromChildren = () => {
		return React.Children.map(children, (child) => {
			if (isExpanderComponent(child)) return child;
		})?.reduce((acc, child, index) => {
			if (typeof child.props.expanded !== "undefined") acc[getExpanderId(index)] = child.props.expanded;
			return acc;
		}, {});
	};
	if (children !== prevChildren) {
		setPrevChildren(children);
		const newActiveExpander = getExpanderStateFromChildren();
		if (newActiveExpander) setActiveExpander({
			...activeExpander,
			...newActiveExpander
		});
	}
	if (activeExpander === void 0) {
		const initialState = getExpanderStateFromChildren();
		if (initialState && Object.keys(initialState).length > 0) setActiveExpander(initialState);
	}
	return /* @__PURE__ */ jsx("ul", {
		className: expanderListClasses,
		ref,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.ExpanderList,
		children: React.Children.map(children, (child, index) => {
			if (isExpanderComponent(child)) {
				const id = getExpanderId(index);
				const expanded = activeExpander?.[id];
				const highlightTextChild = child.props.highlightText || highlightText;
				if (editMode) return /* @__PURE__ */ jsx(ListEditMode_default, {
					color,
					variant,
					onDelete: child.props.onDelete,
					children: React.cloneElement(child, {
						id,
						key: index,
						expanded,
						padding: childPadding,
						color,
						large,
						"aria-expanded": false,
						className: expanderListStyles["expander-list__item"],
						renderChildrenWhenClosed: false,
						variant,
						zIndex,
						highlightText: highlightTextChild,
						editMode: true
					})
				});
				else return React.cloneElement(child, {
					id,
					key: index,
					expanded,
					padding: childPadding,
					color,
					large,
					"aria-expanded": expanded,
					className: expanderListStyles["expander-list__item"],
					handleExpanderClick: (event) => handleExpanderClick(event, `${expanderIdBase}-${index}`),
					renderChildrenWhenClosed,
					variant,
					zIndex,
					highlightText: highlightTextChild
				});
			}
			return child;
		})
	});
};
var ExpanderList = ExpanderListComponent;
ExpanderList.displayName = "ExpanderList";
ExpanderList.Expander = Expander;
Expander.displayName = "ExpanderList.Expander";
var ExpanderList_default = ExpanderList;
export { Expander, ExpanderList_default as default };

//# sourceMappingURL=index.js.map