import React from "react";
import { CheckmarkIcon } from "@navikt/aksel-icons";
import { BodyShort } from "../../../typography/index.js";
import { cl } from "../../../utils/helpers/index.js";
import { useInputContext } from "../Input/Input.context.js";
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
import { isInList } from "../combobox-utils.js";
import filteredOptionsUtil from "./filtered-options-util.js";
import { useFilteredOptionsContext } from "./filteredOptionsContext.js";
const useTextHighlight = (text, searchTerm) => {
    const indexOfHighlightedText = text
        .toLowerCase()
        .indexOf(searchTerm.toLowerCase());
    if (indexOfHighlightedText === -1) {
        // This can happen if the consumer has implemented their own filtering logic
        return [text, "", ""];
    }
    const start = text.substring(0, indexOfHighlightedText);
    const highlight = text.substring(indexOfHighlightedText, indexOfHighlightedText + searchTerm.length);
    const end = text.substring(indexOfHighlightedText + searchTerm.length);
    return [start, highlight, end];
};
const FilteredOptionsItem = ({ option }) => {
    const { inputProps: { id }, size, searchTerm, } = useInputContext();
    const { setIsMouseLastUsedInputDevice, toggleIsListOpen, activeDescendantId, virtualFocus, } = useFilteredOptionsContext();
    const { isMultiSelect, maxSelected, selectedOptions, toggleOption } = useSelectedOptionsContext();
    const [start, highlight, end] = useTextHighlight(option.label, searchTerm);
    const isDisabled = (_option) => maxSelected.isLimitReached && !isInList(_option.value, selectedOptions);
    const optionId = filteredOptionsUtil.getOptionId(id, option.value);
    const isActive = activeDescendantId === optionId;
    return (React.createElement("li", { className: cl("aksel-combobox__list-item", {
            "aksel-combobox__list-item--focus": isActive,
            "aksel-combobox__list-item--selected": isInList(option.value, selectedOptions),
        }), "data-no-focus": isDisabled(option) || undefined, id: optionId, key: optionId, tabIndex: -1, onMouseMove: () => {
            if (!isActive) {
                virtualFocus.moveFocusToElement(optionId);
                setIsMouseLastUsedInputDevice(true);
            }
        }, onPointerUp: (event) => {
            if (isDisabled(option)) {
                return;
            }
            toggleOption(option, event);
            if (!isMultiSelect && !isInList(option.value, selectedOptions)) {
                toggleIsListOpen(false);
            }
        }, role: "option", "aria-selected": isInList(option.value, selectedOptions), "aria-disabled": isDisabled(option) || undefined },
        React.createElement(BodyShort, { size: size, "aria-label": option.label },
            start,
            highlight && React.createElement("mark", null, highlight),
            end),
        isInList(option.value, selectedOptions) && React.createElement(CheckmarkIcon, null)));
};
export default FilteredOptionsItem;
//# sourceMappingURL=FilteredOptionsItem.js.map