"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const chips_1 = require("../../../chips");
const Input_context_1 = require("../Input/Input.context");
const selectedOptionsContext_1 = require("./selectedOptionsContext");
const Option = ({ option }) => {
    const { isMultiSelect, removeSelectedOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
    const { focusInput, readOnly, inputProps } = (0, Input_context_1.useInputContext)();
    if (!isMultiSelect) {
        return (react_1.default.createElement("div", { className: "aksel-combobox__selected-options--no-bg" }, option.label));
    }
    if (readOnly || inputProps.disabled) {
        return (react_1.default.createElement(chips_1.Chips.Toggle, { "data-color": "neutral", checkmark: false, as: "div" }, option.label));
    }
    return (react_1.default.createElement(chips_1.Chips.Removable, { onClick: (event) => {
            event.stopPropagation();
            removeSelectedOption(option);
            focusInput();
        } }, option.label));
};
const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
    const { value } = (0, Input_context_1.useInputContext)();
    const { isMultiSelect } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
    return (react_1.default.createElement(chips_1.Chips, { className: "aksel-combobox__selected-options", size: size, "data-type": isMultiSelect ? "multiple" : "single" },
        value.length === 0 || (isMultiSelect && selectedOptions.length)
            ? selectedOptions.map((option, i) => (react_1.default.createElement(Option, { key: option.label + i, option: option })))
            : [],
        children));
};
exports.default = SelectedOptions;
//# sourceMappingURL=SelectedOptions.js.map