"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.List = exports.ListBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const core_1 = require("../core");
const utils_1 = require("../utils");
const context_1 = require("./context");
const listDivider_1 = __importDefault(require("./listDivider"));
const listHeading_1 = __importDefault(require("./listHeading"));
const listIcon_1 = __importDefault(require("./listIcon"));
const listItem_1 = __importDefault(require("./listItem"));
const listText_1 = __importDefault(require("./listText"));
const clickKeys = ['Enter', ' '];
const nextKeys = ['ArrowDown', 'Tab'];
const prevKeys = ['ArrowUp'];
exports.ListBase = core_1.styled.ulBox ``;
/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
exports.List = (0, core_1.vui)((props, ref) => {
    const { children, className, heading, isInteractive, items, size, variant } = props, rest = __rest(props, ["children", "className", "heading", "isInteractive", "items", "size", "variant"]);
    const styles = (0, core_1.useStyleConfig)('List', props);
    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ isInteractive, size, variant }), [isInteractive, size, variant]);
    const listRef = (0, react_1.useRef)(null);
    const [_, setActive] = react_1.default.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 === null || node === void 0 ? void 0 : node.click();
                            else
                                node === null || node === void 0 ? void 0 : node.focus();
                        }
                    });
                }
                return active;
            });
        }
    };
    (0, react_1.useEffect)(() => {
        if (listRef.current && isInteractive) {
            listRef.current.addEventListener('keydown', onKeydown);
            return () => {
                var _a;
                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', onKeydown);
            };
        }
    }, [listRef.current, isInteractive]);
    return ((0, jsx_runtime_1.jsx)(context_1.ListProvider, { value: context, children: (0, jsx_runtime_1.jsxs)(exports.ListBase, Object.assign({ className: (0, utils_1.cs)('vui-list', className), ref: ref || listRef }, styles.container, rest, { children: [(0, utils_1.isReactText)(heading) ? (0, jsx_runtime_1.jsx)(listHeading_1.default, { text: heading }) : heading, children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(items)
                    ? items.map((_a, index) => {
                        var { key } = _a, props = __rest(_a, ["key"]);
                        return (0, jsx_runtime_1.jsx)(listItem_1.default, Object.assign({}, props), key !== null && key !== void 0 ? key : index);
                    })
                    : items)] })) }));
});
exports.List.Divider = listDivider_1.default;
exports.List.Heading = listHeading_1.default;
exports.List.Icon = listIcon_1.default;
exports.List.Item = listItem_1.default;
exports.List.Text = listText_1.default;
exports.List.displayName = 'List';
exports.default = exports.List;
//# sourceMappingURL=list.js.map