"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectOption = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const checkbox_1 = require("../checkbox");
const core_1 = require("../core");
const list_1 = require("../list");
const popover_1 = require("../popover");
const utils_1 = require("../utils");
const context_1 = require("./context");
/**
 * Displays a select option as a list item. By default, closes popover when option is selected.
 * In multi-select mode, displays a checkbox and doesn't close popover.
 * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.
 */
exports.SelectOption = (0, core_1.vui)((props, ref) => {
    var _a, _b;
    const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp } = props, rest = __rest(props, ["children", "closeOnScroll", "className", "disabled", "title", "onClick", "value"]);
    const { instance } = (_a = (0, popover_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {};
    const { isMultiple, name, onChange, value } = (_b = (0, context_1.useSelectContext)()) !== null && _b !== void 0 ? _b : {};
    const styles = (0, core_1.useStyleConfig)('Select', (0, context_1.useSelectContext)());
    const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp;
    const hide = () => instance === null || instance === void 0 ? void 0 : instance.hide();
    const onClick = (0, utils_1.useCallbackRef)((e) => {
        const nativeEvent = e.nativeEvent || e;
        const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
        Object.defineProperty(clonedEvent, 'target', {
            writable: true,
            value: { value: valueProp, name },
        });
        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
        onChange === null || onChange === void 0 ? void 0 : onChange(clonedEvent);
        !isMultiple && hide();
    });
    const onKeyDown = (0, utils_1.useCallbackRef)((e) => e.key === core_1.KeyboardKeys.Enter && onClick(e));
    const onScroll = (e) => { var _a, _b; return !((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('vui-allowScroll')) && hide(); };
    // Hiding the popover on scroll
    (0, react_1.useEffect)(() => {
        if (closeOnScroll)
            document.addEventListener('scroll', onScroll, true);
        return () => {
            if (closeOnScroll)
                document.removeEventListener('scroll', onScroll, true);
        };
    }, [closeOnScroll]);
    return ((0, jsx_runtime_1.jsx)(list_1.ListItem, Object.assign({ activeBg: "skyBlue.active", className: (0, utils_1.cs)('vui-selectOption', className), disabled: disabled, hoverBg: "skyBlue.hover", isInteractive: true, isSelected: isSelected, onClick: onClick, onKeyDown: onKeyDown, ref: ref, selectedBg: "skyBlue.selected", tabIndex: 0, title: title, value: valueProp }, styles.option, rest, utils_1.ellipsisOverflow, { children: children !== null && children !== void 0 ? children : (isMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, Object.assign({ checked: isSelected, disabled: disabled, mr: 1 }, styles.option)), (0, jsx_runtime_1.jsx)(list_1.List.Text, { children: props.text })] }))) })));
});
exports.SelectOption.displayName = 'SelectOption';
exports.default = exports.SelectOption;
//# sourceMappingURL=selectOption.js.map