import React__default, { useEffect } from 'react';
import { useRefocusOnActivator, useOnKeyDown } from '@jobber/hooks';
import { I as Icon } from './Icon-es.js';

var styles = {"optionsList":"krkUjDI-P7E-","option":"d4hPt6o50kw-","spinning":"CNq0y1X8-Eo-"};

function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
    useRefocusOnActivator(!optionsListRef.current);
    useOnKeyDown(() => onClose(), "Escape");
    useEffect(() => {
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [optionsListRef, dataListHeaderTileRef, onClose]);
    return (React__default.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React__default.createElement("li", { className: styles.option, key: `${option.id}${option.order}`, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
        option.label,
        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))))));
    function handleKeyDown(event, option) {
        if (event.key === "Enter") {
            onSelectChange(option);
        }
    }
    function handleClickOutside(event) {
        var _a, _b;
        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
        if (!isClickInside) {
            onClose();
        }
    }
}

export { DataListSortingOptions as D };
