"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 aksel_icons_1 = require("@navikt/aksel-icons");
const typography_1 = require("../../../typography");
const helpers_1 = require("../../../utils/helpers");
const Input_context_1 = require("../Input/Input.context");
const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
const combobox_utils_1 = require("../combobox-utils");
const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
const filteredOptionsContext_1 = require("./filteredOptionsContext");
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, } = (0, Input_context_1.useInputContext)();
    const { setIsMouseLastUsedInputDevice, toggleIsListOpen, activeDescendantId, virtualFocus, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
    const { isMultiSelect, maxSelected, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
    const [start, highlight, end] = useTextHighlight(option.label, searchTerm);
    const isDisabled = (_option) => maxSelected.isLimitReached && !(0, combobox_utils_1.isInList)(_option.value, selectedOptions);
    const optionId = filtered_options_util_1.default.getOptionId(id, option.value);
    const isActive = activeDescendantId === optionId;
    return (react_1.default.createElement("li", { className: (0, helpers_1.cl)("aksel-combobox__list-item", {
            "aksel-combobox__list-item--focus": isActive,
            "aksel-combobox__list-item--selected": (0, combobox_utils_1.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 && !(0, combobox_utils_1.isInList)(option.value, selectedOptions)) {
                toggleIsListOpen(false);
            }
        }, role: "option", "aria-selected": (0, combobox_utils_1.isInList)(option.value, selectedOptions), "aria-disabled": isDisabled(option) || undefined },
        react_1.default.createElement(typography_1.BodyShort, { size: size, "aria-label": option.label },
            start,
            highlight && react_1.default.createElement("mark", null, highlight),
            end),
        (0, combobox_utils_1.isInList)(option.value, selectedOptions) && react_1.default.createElement(aksel_icons_1.CheckmarkIcon, null)));
};
exports.default = FilteredOptionsItem;
//# sourceMappingURL=FilteredOptionsItem.js.map