/**
 * 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 { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { useOverflowItems } from "../../global/js/hooks/useOverflowItems/useOverflowItems.js";
import { TYPES } from "./constants.js";
import { TagOverflowModal } from "./TagOverflowModal.js";
import { TagOverflowPopover } from "./TagOverflowPopover.js";
import React, { createElement, forwardRef, useCallback, useRef, useState } from "react";
import PropTypes from "prop-types";
import { DismissibleTag, Tag } from "@carbon/react";

//#region src/components/TagOverflow/TagOverflow.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 blockClass = `${pkg.prefix}--tag-overflow`;
const componentName = "TagOverflow";
const allTagsModalSearchThreshold = 10;
const TagOverflow = forwardRef((props, ref) => {
	const { align = "start", allTagsModalAriaLabel, allTagsModalSearchLabel, allTagsModalSearchPlaceholderText, allTagsModalTarget, allTagsModalTitle, autoAlign, className, items, maxVisible, overflowAlign = "bottom", overflowClassName, overflowType = "default", onOverflowTagChange, showAllTagsLabel, tagComponent, ...rest } = props;
	const containerRef = useRef(null);
	const offsetRef = useRef(null);
	const [showAllModalOpen, setShowAllModalOpen] = useState(false);
	const [popoverOpen, setPopoverOpen] = useState(false);
	const { visibleItems, hiddenItems: overflowItems, itemRefHandler } = useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange);
	const handleShowAllClick = () => {
		setShowAllModalOpen(true);
	};
	const handleModalClose = () => {
		setShowAllModalOpen(false);
	};
	const getCustomComponent = (item, tagComponent) => {
		const { className, ...other } = item;
		return createElement(tagComponent, {
			...other,
			className: (0, import_classnames.default)(`${blockClass}__item`, className)
		});
	};
	const handleTagOnClose = useCallback((onClose, index) => {
		onClose?.();
		if (index <= visibleItems?.length - 1) setPopoverOpen(false);
	}, [visibleItems]);
	return /* @__PURE__ */ React.createElement("div", {
		...rest,
		className: (0, import_classnames.default)(blockClass, className),
		...getDevtoolsProps(componentName),
		ref
	}, /* @__PURE__ */ React.createElement("div", {
		className: (0, import_classnames.default)(`${blockClass}__visible-tags`, `${blockClass}--align-${align}`),
		ref: containerRef
	}, visibleItems.map((item, index) => {
		const { id, label, tagType, onClose, filter, ...other } = item;
		return /* @__PURE__ */ React.createElement("div", {
			className: `${blockClass}__tag-container`,
			ref: (node) => {
				itemRefHandler(id, node);
			},
			key: id
		}, tagComponent ? getCustomComponent(item, tagComponent) : typeof onClose === "function" || filter ? /* @__PURE__ */ React.createElement(DismissibleTag, {
			...other,
			className: `${blockClass}__item--tag`,
			type: tagType,
			onClose: () => handleTagOnClose(onClose, index),
			text: label
		}) : /* @__PURE__ */ React.createElement(Tag, {
			...other,
			className: `${blockClass}__item--tag`,
			type: tagType
		}, label));
	}), overflowItems.length > 0 && /* @__PURE__ */ React.createElement("div", {
		className: `${blockClass}__indicator`,
		ref: offsetRef
	}, /* @__PURE__ */ React.createElement(TagOverflowPopover, {
		allTagsModalSearchThreshold,
		className: overflowClassName,
		onShowAllClick: handleShowAllClick,
		overflowTags: overflowItems,
		overflowAlign,
		overflowType,
		showAllTagsLabel,
		key: "tag-overflow-popover",
		ref: offsetRef,
		popoverOpen,
		setPopoverOpen,
		autoAlign
	}), /* @__PURE__ */ React.createElement(TagOverflowModal, {
		allTags: items,
		open: showAllModalOpen,
		title: allTagsModalTitle,
		modalAriaLabel: allTagsModalAriaLabel,
		onClose: handleModalClose,
		overflowType,
		searchLabel: allTagsModalSearchLabel,
		searchPlaceholder: allTagsModalSearchPlaceholderText,
		portalTarget: allTagsModalTarget
	}))));
});
TagOverflow.displayName = componentName;
const tagTypes = Object.keys(TYPES);
TagOverflow.propTypes = {
	align: PropTypes.oneOf([
		"start",
		"center",
		"end"
	]),
	allTagsModalAriaLabel: PropTypes.string,
	allTagsModalSearchLabel: PropTypes.string,
	allTagsModalSearchPlaceholderText: PropTypes.string,
	allTagsModalTarget: PropTypes.node,
	allTagsModalTitle: PropTypes.string,
	autoAlign: PropTypes.bool,
	className: PropTypes.string,
	items: PropTypes.arrayOf(PropTypes.shape({
		id: PropTypes.string.isRequired,
		label: PropTypes.string.isRequired,
		tagType: PropTypes.oneOf(tagTypes)
	}).isRequired),
	maxVisible: PropTypes.number,
	measurementOffset: PropTypes.number,
	multiline: PropTypes.bool,
	onOverflowTagChange: PropTypes.func,
	overflowAlign: PropTypes.oneOf([
		"top",
		"top-left",
		"top-right",
		"bottom",
		"bottom-left",
		"bottom-right",
		"left",
		"left-bottom",
		"left-top",
		"right",
		"right-bottom",
		"right-top"
	]),
	overflowClassName: PropTypes.string,
	overflowType: PropTypes.oneOf(["default", "tag"]),
	showAllTagsLabel: PropTypes.string,
	tagComponent: PropTypes.elementType
};

//#endregion
export { TagOverflow };