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

const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_util = require('../../utils/util.js');
const require_ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');
const require_useTranslations = require('../../utils/useTranslations.js');
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_react_icons = require("@carbon/react/icons");

//#region src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**@ts-ignore */
const ItemOptionForValueField = ({ conditionState = {}, config = {}, onChange, closePopover }) => {
	const multiSelectable = require_util.checkForMultiSelectOperator(conditionState, config);
	const { popOverSearchThreshold, getOptions, rootState } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
	const [propertyText, clearSearchText] = require_useTranslations.useTranslations(["propertyText", "clearSearchText"]);
	const { conditionBuilderRef } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
	const contentRef = (0, react.useRef)(null);
	const [allOptions, setAllOptions] = (0, react.useState)(config?.options);
	const [searchValue, setSearchValue] = (0, react.useState)("");
	const filteredItems = allOptions?.filter((opt) => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
	const selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== void 0 ? [conditionState.value] : [];
	(0, react.useEffect)(() => {
		if (!allOptions && getOptions) {
			const fetchData = async () => {
				const response = await getOptions(rootState, conditionState);
				if (response?.length > 0 && Object.keys(response[0]).includes("label") && Object.keys(response[0]).includes("id")) setAllOptions(response);
			};
			fetchData();
		}
	}, []);
	(0, react.useEffect)(() => {
		if (contentRef.current) {
			const firstFocusableElement = contentRef.current.querySelector("input, button,li");
			if (firstFocusableElement) firstFocusableElement?.focus();
		}
	}, [allOptions]);
	const handleSelectAll = (evt) => {
		if (evt.currentTarget.dataset.selectedAll == "false") onChange(void 0);
		else onChange(allOptions);
	};
	const onSearchChangeHandler = (evt) => {
		const { value } = evt.target;
		setSearchValue(value);
	};
	const onClickHandler = (evt, option, isSelected) => {
		const updatedSelections = selection.filter((item) => item !== "INVALID");
		if (multiSelectable) if (isSelected) {
			const items = updatedSelections.filter((v) => v.id !== option.id);
			onChange(items.length > 0 ? items : void 0);
		} else onChange([...updatedSelections, option]);
		else onChange(option, evt);
		if (evt.target instanceof SVGElement) evt.stopPropagation();
	};
	const getAriaLabel = () => {
		return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
	};
	if (!allOptions) return /* @__PURE__ */ react.default.createElement(_carbon_react.SelectSkeleton, null);
	return /* @__PURE__ */ react.default.createElement("div", {
		className: `${require_util.blockClass}__item-option`,
		ref: contentRef
	}, allOptions.length > popOverSearchThreshold ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__item-option__search` }, /* @__PURE__ */ react.default.createElement(_carbon_react.Search, {
		size: "sm",
		labelText: clearSearchText,
		closeButtonLabelText: clearSearchText,
		onChange: onSearchChangeHandler,
		onKeyDown: (evt) => {
			require_util.onKeyDownHandlerForSearch(evt, conditionBuilderRef, closePopover);
		}
	})) : null, multiSelectable && /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__multiselectSelectionStatusContainer` }, /* @__PURE__ */ react.default.createElement("label", null, selection.length, "/", allOptions.length, " Selected"), /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
		kind: "ghost",
		size: "sm",
		"data-selected-all": `${selection.length == 0 ? true : false}`,
		onClick: handleSelectAll,
		className: `${require_util.blockClass}__selectAll-button`
	}, selection.length == 0 ? "Select all" : "Deselect all")), /* @__PURE__ */ react.default.createElement("ul", {
		"aria-label": getAriaLabel(),
		role: "listbox",
		"data-multi-select": multiSelectable
	}, filteredItems?.map((option) => {
		const isSelected = selection.map((option) => option.id).includes(option.id);
		const Icon = option.icon;
		return /* @__PURE__ */ react.default.createElement("li", {
			tabIndex: 0,
			key: option.id,
			role: "option",
			"aria-selected": isSelected,
			className: `${require_util.blockClass}__item-option__option`,
			onKeyUp: () => {
				return false;
			},
			onClick: (evt) => onClickHandler(evt, option, isSelected)
		}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__item-option__option-content` }, multiSelectable ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { className: `${require_util.blockClass}__option-check-box` }, isSelected ? /* @__PURE__ */ react.default.createElement(_carbon_react_icons.CheckboxCheckedFilled, null) : /* @__PURE__ */ react.default.createElement(_carbon_react_icons.Checkbox, null)), /* @__PURE__ */ react.default.createElement("span", { className: `${require_util.blockClass}__item-option__option-label` }, /* @__PURE__ */ react.default.createElement("span", {
			className: `${require_util.blockClass}__item-option__option-label-text`,
			title: option.label
		}, option.label), Icon && /* @__PURE__ */ react.default.createElement("span", { className: `${require_util.blockClass}__option-icon` }, /* @__PURE__ */ react.default.createElement(Icon, null)))) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { className: `${require_util.blockClass}__item-option__option-label` }, Icon && /* @__PURE__ */ react.default.createElement(Icon, null), /* @__PURE__ */ react.default.createElement("span", {
			className: `${require_util.blockClass}__item-option__option-label-text`,
			title: option.label
		}, option.label)), isSelected && /* @__PURE__ */ react.default.createElement(_carbon_react_icons.Checkmark, { className: `${require_util.blockClass}__checkmark` }))));
	})));
};
ItemOptionForValueField.propTypes = {
	conditionState: prop_types.default.object,
	config: prop_types.default.object,
	onChange: prop_types.default.func
};

//#endregion
exports.ItemOptionForValueField = ItemOptionForValueField;