import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { Checkbox } from '../checkbox';
import { KeyboardKeys, useStyleConfig, vui } from '../core';
import { List, ListItem } from '../list';
import { usePopoverContext } from '../popover';
import { cs, ellipsisOverflow, useCallbackRef } from '../utils';
import { useSelectContext } from './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.
 */
export const SelectOption = vui((props, ref) => {
    const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props;
    const { instance } = usePopoverContext() ?? {};
    const { isMultiple, name, onChange, value } = useSelectContext() ?? {};
    const styles = useStyleConfig('Select', useSelectContext());
    const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp;
    const hide = () => instance?.hide();
    const onClick = 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?.(e);
        onChange?.(clonedEvent);
        !isMultiple && hide();
    });
    const onKeyDown = useCallbackRef((e) => e.key === KeyboardKeys.Enter && onClick(e));
    const onScroll = (e) => !e.target?.className?.includes('vui-allowScroll') && hide();
    // Hiding the popover on scroll
    useEffect(() => {
        if (closeOnScroll)
            document.addEventListener('scroll', onScroll, true);
        return () => {
            if (closeOnScroll)
                document.removeEventListener('scroll', onScroll, true);
        };
    }, [closeOnScroll]);
    return (_jsx(ListItem, { activeBg: "skyBlue.active", className: 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, ...ellipsisOverflow, children: children ??
            (isMultiple && (_jsxs(_Fragment, { children: [_jsx(Checkbox, { checked: isSelected, disabled: disabled, mr: 1, ...styles.option }), _jsx(List.Text, { children: props.text })] }))) }));
});
SelectOption.displayName = 'SelectOption';
export default SelectOption;
//# sourceMappingURL=selectOption.js.map