/**
 * 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 { blockClass, onKeyDownHandlerForSearch } from "../../utils/util.js";
import { ConditionBuilderContext } from "../../ConditionBuilderContext/ConditionBuilderProvider.js";
import { useTranslations } from "../../utils/useTranslations.js";
import React, { useContext, useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { Search } from "@carbon/react";
import { Checkmark } from "@carbon/react/icons";
//#region src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.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.
*/
const ItemOption = ({ conditionState = {}, config = {}, onChange, closePopover, group }) => {
	const { popOverSearchThreshold } = useContext(ConditionBuilderContext);
	const contentRef = useRef(null);
	const [propertyText, clearSearchText] = useTranslations(["propertyText", "clearSearchText"]);
	const { conditionBuilderRef } = useContext(ConditionBuilderContext);
	const allOptions = config?.options;
	const [searchValue, setSearchValue] = useState("");
	const selection = conditionState.value;
	const filteredItems = searchValue ? allOptions?.filter((opt) => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
	useEffect(() => {
		if (contentRef.current) {
			const firstFocusableElement = contentRef.current?.querySelector("input, button,li");
			if (firstFocusableElement) firstFocusableElement.focus();
		}
	}, [allOptions]);
	const onClickHandler = (evt, option) => {
		if (!evt.currentTarget.hasAttribute("aria-disabled")) onChange(option.id, evt);
	};
	const onSearchChangeHandler = (evt) => {
		const { value } = evt.target;
		setSearchValue(value);
	};
	const getAriaLabel = () => {
		return conditionState.label ? conditionState.label : propertyText;
	};
	const getStatementContent = (option) => {
		return /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__statement_wrapper` }, /* @__PURE__ */ React.createElement("div", null, option.label, " (", option.connector, ")"), /* @__PURE__ */ React.createElement("div", null, option.secondaryLabel));
	};
	if (!allOptions) return;
	return /* @__PURE__ */ React.createElement("div", {
		className: `${blockClass}__item-option`,
		ref: contentRef
	}, allOptions.length > popOverSearchThreshold ? /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__item-option__search` }, /* @__PURE__ */ React.createElement(Search, {
		size: "sm",
		labelText: clearSearchText,
		closeButtonLabelText: clearSearchText,
		onChange: onSearchChangeHandler,
		onKeyDown: (evt) => {
			onKeyDownHandlerForSearch(evt, conditionBuilderRef, closePopover);
		}
	})) : null, /* @__PURE__ */ React.createElement("ul", {
		"aria-label": getAriaLabel(),
		role: "listbox"
	}, filteredItems?.map((option) => {
		const isSelected = selection === option.id;
		const Icon = option.icon;
		const disabled = option?.getIsDisabled?.({
			conditionState,
			group
		});
		const hidden = option?.getIsHidden?.({
			conditionState,
			group
		});
		return /* @__PURE__ */ React.createElement("li", {
			tabIndex: 0,
			key: option.id,
			role: "option",
			"aria-selected": isSelected,
			className: `${blockClass}__item-option__option`,
			onKeyUp: () => {
				return false;
			},
			onClick: (evt) => onClickHandler(evt, option),
			...disabled ? { "aria-disabled": "true" } : {},
			...hidden ? { "aria-hidden": "true" } : {}
		}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__item-option__option-content` }, /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__item-option__option-label` }, Icon && /* @__PURE__ */ React.createElement(Icon, null), /* @__PURE__ */ React.createElement("span", {
			className: `${blockClass}__item-option__option-label-text`,
			title: option.label
		}, config?.isStatement ? getStatementContent(option) : option.label)), isSelected && /* @__PURE__ */ React.createElement(Checkmark, { className: `${blockClass}__checkmark` })));
	})));
};
ItemOption.propTypes = {
	/**
	* current condition object
	*/
	conditionState: PropTypes.object,
	/**
	* current config object that this property is part of
	*/
	config: PropTypes.object,
	/**
	* callback to update state oin date change
	*/
	onChange: PropTypes.func
};
//#endregion
export { ItemOption };
