/**
 * 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 { pkg } from "../../settings.js";
import { useClickOutside } from "../../global/js/hooks/useClickOutside.js";
import React, { forwardRef, useRef } from "react";
import PropTypes from "prop-types";
import { DismissibleTag, Link, OperationalTag, Popover, PopoverContent, Tag } from "@carbon/react";
//#region src/components/TagOverflow/TagOverflowPopover.tsx
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const componentName = "TagOverflowPopover";
const blockClass = `${pkg.prefix}--tag-overflow-popover`;
const TagOverflowPopover = forwardRef((props, ref) => {
	const { allTagsModalSearchThreshold, autoAlign, className, onShowAllClick, overflowAlign, overflowTags, overflowType, showAllTagsLabel, popoverOpen, setPopoverOpen, ...rest } = props;
	const localRef = useRef(null);
	const overflowTagContent = useRef(null);
	useClickOutside(ref || localRef, () => {
		if (popoverOpen) setPopoverOpen?.(false);
	});
	const handleShowAllTagsClick = (evt) => {
		evt.stopPropagation();
		evt.preventDefault();
		setPopoverOpen?.(false);
		onShowAllClick?.();
	};
	const handleEscKeyPress = (evt) => {
		const { key } = evt;
		if (key === "Escape") setPopoverOpen?.(false);
	};
	const getOverflowPopoverItems = () => {
		const thresh = allTagsModalSearchThreshold ?? 0;
		return overflowTags?.filter((_, index) => overflowTags?.length > thresh ? index < thresh : index <= thresh);
	};
	const visibleItems = getOverflowPopoverItems();
	const hasItems = visibleItems?.length > 0;
	return /* @__PURE__ */ React.createElement("span", {
		...rest,
		"aria-hidden": overflowTags?.length === 0,
		className: (0, import_classnames.default)(blockClass, { [`${blockClass}--hidden`]: overflowTags?.length === 0 }),
		ref: ref || localRef
	}, /* @__PURE__ */ React.createElement(Popover, {
		align: overflowAlign,
		autoAlign,
		className: (0, import_classnames.default)(className, `${blockClass}__el`),
		dropShadow: true,
		highContrast: true,
		onKeyDown: handleEscKeyPress,
		open: popoverOpen || false
	}, /* @__PURE__ */ React.createElement(OperationalTag, {
		onClick: () => setPopoverOpen?.(!popoverOpen),
		className: (0, import_classnames.default)(`${blockClass}__trigger`),
		text: `+${overflowTags.length}`,
		"aria-expanded": popoverOpen,
		"aria-controls": `${pkg.prefix}-overflow-content`
	}), /* @__PURE__ */ React.createElement(PopoverContent, {
		id: `${pkg.prefix}-overflow-content`,
		"aria-hidden": !popoverOpen
	}, /* @__PURE__ */ React.createElement("div", {
		ref: overflowTagContent,
		className: `${blockClass}__content`
	}, /* @__PURE__ */ React.createElement("ul", { className: `${blockClass}__tag-list` }, hasItems && visibleItems.map(({ label, id, tagType, filter, onClose, ...other }) => {
		const typeValue = overflowType === "tag" ? "high-contrast" : tagType;
		const isFilterable = overflowType === "tag" && (typeof onClose === "function" || filter);
		let tag;
		if (isFilterable) tag = /* @__PURE__ */ React.createElement(DismissibleTag, {
			...other,
			onClose: () => onClose?.(),
			type: typeValue,
			text: label
		});
		else tag = /* @__PURE__ */ React.createElement(Tag, {
			...other,
			type: typeValue
		}, label);
		return /* @__PURE__ */ React.createElement("li", {
			className: (0, import_classnames.default)(`${blockClass}__tag-item`, {
				[`${blockClass}__tag-item--default`]: overflowType === "default",
				[`${blockClass}__tag-item--tag`]: overflowType === "tag"
			}),
			key: id
		}, overflowType === "tag" ? tag : label);
	})), (overflowTags?.length ?? 0) > (allTagsModalSearchThreshold ?? 0) && /* @__PURE__ */ React.createElement(Link, {
		className: `${blockClass}__show-all-tags-link`,
		href: "",
		onClick: handleShowAllTagsClick,
		role: "button"
	}, showAllTagsLabel)))));
});
TagOverflowPopover.displayName = componentName;
TagOverflowPopover.propTypes = {
	/**
	* count of overflowTags over which a modal is offered
	*/
	allTagsModalSearchThreshold: PropTypes.number,
	/**
	* Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
	*/
	autoAlign: PropTypes.bool,
	/**
	* className
	*/
	className: PropTypes.string,
	/**
	* function to execute on clicking show all
	*/
	onShowAllClick: PropTypes.func.isRequired,
	/**
	* overflowAlign from the standard tooltip
	*/
	overflowAlign: PropTypes.oneOf([
		"top",
		"top-left",
		"top-right",
		"bottom",
		"bottom-left",
		"bottom-right",
		"left",
		"left-bottom",
		"left-top",
		"right",
		"right-bottom",
		"right-top"
	]),
	/**
	* tags shown in overflow
	*/
	overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
	/**
	* Type of rendering displayed inside of the tag overflow component
	*/
	overflowType: PropTypes.oneOf(["default", "tag"]),
	/**
	* Open state of the popover
	*/
	popoverOpen: PropTypes.bool,
	/**
	* Setter function for the popoverOpen state value
	*/
	setPopoverOpen: PropTypes.func,
	/**
	* label for the overflow show all tags link
	*/
	showAllTagsLabel: PropTypes.string
};
//#endregion
export { TagOverflowPopover };
