import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useMemo, useRef } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import { cs, filterUndefined, isArray, isReactText } from '../utils';
import { ListProvider } from './context';
import ListDivider from './listDivider';
import ListHeading from './listHeading';
import ListIcon from './listIcon';
import ListItem from './listItem';
import ListText from './listText';
const clickKeys = ['Enter', ' '];
const nextKeys = ['ArrowDown', 'Tab'];
const prevKeys = ['ArrowUp'];
export const ListBase = styled.ulBox ``;
/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
export const List = vui((props, ref) => {
    const { children, className, heading, isInteractive, items, size, variant, ...rest } = props;
    const styles = useStyleConfig('List', props);
    const context = useMemo(() => filterUndefined({ isInteractive, size, variant }), [isInteractive, size, variant]);
    const listRef = useRef(null);
    const [_, setActive] = React.useState(-1);
    const onKeydown = (event) => {
        if ([...prevKeys, ...nextKeys, ...clickKeys].includes(event.key)) {
            event.preventDefault();
            setActive((a) => {
                let active = a;
                if (listRef.current) {
                    const allChildren = Array.from(listRef.current.childNodes);
                    const tabIndexedChildren = allChildren.filter(child => child.tabIndex === 0);
                    if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1)
                        active++;
                    if (prevKeys.includes(event.key))
                        active = active > 0 ? active - 1 : 0;
                    tabIndexedChildren.forEach((node, index) => {
                        if (index === active) {
                            if (clickKeys.includes(event.key))
                                node?.click();
                            else
                                node?.focus();
                        }
                    });
                }
                return active;
            });
        }
    };
    useEffect(() => {
        if (listRef.current && isInteractive) {
            listRef.current.addEventListener('keydown', onKeydown);
            return () => {
                listRef.current?.removeEventListener('keydown', onKeydown);
            };
        }
    }, [listRef.current, isInteractive]);
    return (_jsx(ListProvider, { value: context, children: _jsxs(ListBase, { className: cs('vui-list', className), ref: ref || listRef, ...styles.container, ...rest, children: [isReactText(heading) ? _jsx(ListHeading, { text: heading }) : heading, children ??
                    (isArray(items)
                        ? items.map(({ key, ...props }, index) => _jsx(ListItem, { ...props }, key ?? index))
                        : items)] }) }));
});
List.Divider = ListDivider;
List.Heading = ListHeading;
List.Icon = ListIcon;
List.Item = ListItem;
List.Text = ListText;
List.displayName = 'List';
export default List;
//# sourceMappingURL=list.js.map