"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef, Fragment } from "react";
import { getIcon } from "../icon/iconConfig.js";
import { icon } from "../icon/styles.js";
import { TextIconSpacing } from "../icon/TextIconSpacing.js";
import { getListItemHeight } from "../list/getListItemHeight.js";
import { ListItemText } from "../list/ListItemText.js";
import { MenuItem } from "../menu/MenuItem.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { option } from "./optionStyles.js";
import { useListboxContext } from "./useListboxProvider.js";
import { triggerManualChangeEvent } from "./utils.js";
const noop = ()=>{
// do nothing
};
/**
 * This icon is used while the option is unselected so that the selected and
 * unselected options have the same alignment.
 *
 * @remarks \@since 6.0.0
 */ export const DEFAULT_OPTION_UNSELECTED_ICON = /*#__PURE__*/ _jsx("span", {
    className: icon({
        type: "svg"
    })
});
/**
 * **Client Component**
 *
 * This component is a wrapper around the {@link MenuItem} to implement custom
 * select option behavior.
 *
 * @remarks
 * \@since 6.0.0 removed the `selected` and `focused` props.
 * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
 * `selectedIconAfter`, and `iconSpacingProps` props.
 */ export const Option = /*#__PURE__*/ forwardRef(function Option(props, ref) {
    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter = false, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
    const id = useEnsuredId(propId, "option");
    const { inputRef, currentValue, disableSelectedIcon } = useListboxContext();
    const selected = value === currentValue;
    const selectedIcon = getIcon("selected", disableSelectedIcon ? null : propSelectedIcon);
    const unselectedIcon = disableSelectedIcon ? null : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;
    const icon = selected ? selectedIcon : unselectedIcon;
    let leftAddon = propLeftAddon;
    let rightAddon = propRightAddon;
    let children = propChildren;
    let disableTextChildren = propDisableTextChildren;
    if (!selectedIconAfter && icon) {
        leftAddon = icon;
        if (propLeftAddon) {
            disableTextChildren = true;
            const Wrapper = propDisableTextChildren ? Fragment : ListItemText;
            children = /*#__PURE__*/ _jsx(TextIconSpacing, {
                ...textIconSpacingProps,
                icon: propLeftAddon,
                children: /*#__PURE__*/ _jsx(Wrapper, {
                    children: children
                })
            });
        }
    } else if (icon) {
        rightAddon = icon;
        if (propRightAddon) {
            disableTextChildren = true;
            const Wrapper = propDisableTextChildren ? Fragment : ListItemText;
            children = /*#__PURE__*/ _jsx(TextIconSpacing, {
                ...textIconSpacingProps,
                icon: propRightAddon,
                children: /*#__PURE__*/ _jsx(Wrapper, {
                    children: children
                })
            });
        }
    }
    const height = getListItemHeight({
        height: propHeight,
        leftAddon: leftAddon === icon ? null : leftAddon,
        leftAddonType,
        rightAddon: rightAddon === icon ? null : rightAddon,
        rightAddonType,
        secondaryText
    });
    return /*#__PURE__*/ _jsx(MenuItem, {
        ...remaining,
        "aria-selected": selected || undefined,
        id: id,
        ref: ref,
        role: role,
        onClick: (event)=>{
            onClick(event);
            triggerManualChangeEvent(inputRef.current, value);
        },
        className: option({
            icon: !!icon,
            selected,
            className
        }),
        secondaryText: secondaryText,
        height: height,
        leftAddon: leftAddon,
        leftAddonType: leftAddonType,
        leftAddonClassName: cnb(leftAddon === icon && "rmd-option__icon", leftAddonClassName),
        rightAddon: rightAddon,
        rightAddonType: rightAddonType,
        rightAddonClassName: cnb(rightAddon === icon && "rmd-option__icon", rightAddonClassName),
        disableTextChildren: disableTextChildren,
        children: children
    });
});

//# sourceMappingURL=Option.js.map