/**
 * 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 { prepareProps } from "../../global/js/utils/props-helper.js";
import { usePortalTarget } from "../../global/js/hooks/usePortalTarget.js";
import React, { useState } from "react";
import PropTypes from "prop-types";
import { ComposedModal, DismissibleTag, ModalBody, ModalHeader, Search, Tag } from "@carbon/react";
//#region src/components/TagOverflow/TagOverflowModal.tsx
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const componentName = "TagOverflowModal";
const blockClass = `${pkg.prefix}--tag-overflow-modal`;
const defaults = {
	modalAriaLabel: "List of all tags",
	searchLabel: ""
};
const TagOverflowModal = ({ allTags, className, title, modalAriaLabel = defaults.modalAriaLabel, onClose, onTagClose, open, overflowType, portalTarget: portalTargetIn, searchLabel = defaults.searchLabel, searchPlaceholder, ...rest }) => {
	const [search, setSearch] = useState("");
	const renderPortalUse = usePortalTarget(portalTargetIn);
	const getFilteredItems = () => {
		if (open && search && allTags) return allTags.filter((tag) => tag.label?.toLocaleLowerCase()?.includes(search.toLocaleLowerCase()));
		return allTags || [];
	};
	const handleSearch = (evt) => {
		setSearch(evt.target.value || "");
	};
	return renderPortalUse(/* @__PURE__ */ React.createElement(ComposedModal, {
		...rest,
		containerClassName: `${blockClass}__container`,
		className: (0, import_classnames.default)(className, blockClass),
		size: "sm",
		"aria-label": "Search all",
		open,
		onClose
	}, /* @__PURE__ */ React.createElement(ModalHeader, {
		className: `${blockClass}__header`,
		closeModal: onClose,
		title
	}, /* @__PURE__ */ React.createElement(Search, {
		"data-modal-primary-focus": true,
		className: `${blockClass}__search`,
		labelText: searchLabel,
		placeholder: searchPlaceholder,
		onChange: handleSearch,
		size: "lg"
	})), /* @__PURE__ */ React.createElement(ModalBody, {
		className: `${blockClass}__body`,
		hasForm: true,
		hasScrollingContent: true,
		"aria-label": modalAriaLabel
	}, getFilteredItems().map(({ label, id, filter, onClose }) => {
		return overflowType === "tag" && (typeof onClose === "function" || filter) ? /* @__PURE__ */ React.createElement(DismissibleTag, {
			key: id,
			text: label,
			onClose: () => onTagClose?.({
				label,
				id
			})
		}) : /* @__PURE__ */ React.createElement(Tag, { key: id }, label);
	}), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__fade` }))));
};
TagOverflowModal.propTypes = {
	allTags: PropTypes.arrayOf(PropTypes.shape({
		...prepareProps(Tag.propTypes, "filter"),
		label: PropTypes.string.isRequired
	})),
	className: PropTypes.string,
	onClose: PropTypes.func,
	onTagClose: PropTypes.func,
	open: PropTypes.bool,
	overflowType: PropTypes.oneOf(["default", "tag"]),
	portalTarget: PropTypes.node,
	searchLabel: PropTypes.string,
	searchPlaceholder: PropTypes.string,
	title: PropTypes.string
};
TagOverflowModal.displayName = componentName;
//#endregion
export { TagOverflowModal };
