import React from "react";
import { PlusIcon } from "@navikt/aksel-icons";
import { BodyShort, Label } from "../../../typography/index.js";
import { cl } from "../../../utils/helpers/index.js";
import { useI18n } from "../../../utils/i18n/i18n.hooks.js";
import { useInputContext } from "../Input/Input.context.js";
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
import { isInList, toComboboxOption } from "../combobox-utils.js";
import filteredOptionsUtil from "./filtered-options-util.js";
import { useFilteredOptionsContext } from "./filteredOptionsContext.js";
const AddNewOption = () => {
    const { inputProps: { id }, size, searchTerm, } = useInputContext();
    const { setIsMouseLastUsedInputDevice, toggleIsListOpen, activeDescendantId, virtualFocus, } = useFilteredOptionsContext();
    const { isMultiSelect, selectedOptions, toggleOption } = useSelectedOptionsContext();
    const translate = useI18n("Combobox");
    return (React.createElement("li", { tabIndex: -1, onMouseMove: () => {
            if (activeDescendantId !== filteredOptionsUtil.getAddNewOptionId(id)) {
                virtualFocus.moveFocusToElement(filteredOptionsUtil.getAddNewOptionId(id));
                setIsMouseLastUsedInputDevice(true);
            }
        }, onPointerUp: (event) => {
            toggleOption(toComboboxOption(searchTerm), event);
            if (!isMultiSelect && !isInList(searchTerm, selectedOptions))
                toggleIsListOpen(false);
        }, id: filteredOptionsUtil.getAddNewOptionId(id), className: cl("aksel-combobox__list-item aksel-combobox__list-item--new-option", {
            "aksel-combobox__list-item--new-option--focus": activeDescendantId === filteredOptionsUtil.getAddNewOptionId(id),
        }), role: "option", "aria-selected": false },
        React.createElement(PlusIcon, { "aria-hidden": true }),
        React.createElement(BodyShort, { size: size },
            translate("addOption"),
            " ",
            React.createElement(Label, { as: "span", size: size },
                "\u201C",
                searchTerm,
                "\u201D"))));
};
export default AddNewOption;
//# sourceMappingURL=AddNewOption.js.map