import React from "react";
import { Chips } from "../../../chips/index.js";
import { useInputContext } from "../Input/Input.context.js";
import { useSelectedOptionsContext } from "./selectedOptionsContext.js";
const Option = ({ option }) => {
    const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
    const { focusInput, readOnly, inputProps } = useInputContext();
    if (!isMultiSelect) {
        return (React.createElement("div", { className: "aksel-combobox__selected-options--no-bg" }, option.label));
    }
    if (readOnly || inputProps.disabled) {
        return (React.createElement(Chips.Toggle, { "data-color": "neutral", checkmark: false, as: "div" }, option.label));
    }
    return (React.createElement(Chips.Removable, { onClick: (event) => {
            event.stopPropagation();
            removeSelectedOption(option);
            focusInput();
        } }, option.label));
};
const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
    const { value } = useInputContext();
    const { isMultiSelect } = useSelectedOptionsContext();
    return (React.createElement(Chips, { className: "aksel-combobox__selected-options", size: size, "data-type": isMultiSelect ? "multiple" : "single" },
        value.length === 0 || (isMultiSelect && selectedOptions.length)
            ? selectedOptions.map((option, i) => (React.createElement(Option, { key: option.label + i, option: option })))
            : [],
        children));
};
export default SelectedOptions;
//# sourceMappingURL=SelectedOptions.js.map