"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Navigation = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
const Navigation = (props) => {
    const dispatch = (0, react_redux_1.useDispatch)();
    const handleKeyPress = React.useCallback((event) => {
        if ((event.ctrlKey || event.metaKey) &&
            (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
            const isKeyUp = event.code === 'ArrowUp';
            const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.module === props.activeItem || item.label === props.activeItem));
            let nextMenuItem = null;
            if (isKeyUp) {
                let candidate = props.menuItems[currentIndex - 1] !== '-'
                    ? props.menuItems[currentIndex - 1]
                    : props.menuItems[currentIndex - 2];
                nextMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
            }
            else {
                let candidate = props.menuItems[currentIndex + 1] !== '-'
                    ? props.menuItems[currentIndex + 1]
                    : props.menuItems[currentIndex + 2];
                nextMenuItem = candidate ? candidate : props.menuItems[0];
            }
            if (nextMenuItem && nextMenuItem !== '-') {
                dispatch(nextMenuItem.reduxAction);
            }
        }
    }, [props.activeItem, props.menuItems]);
    (0, useGlobalEvent_1.useGlobalEvent)('keydown', handleKeyPress);
    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
            var _a, _b, _c, _d, _e;
            const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
            if (menuItem === '-') {
                return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
            }
            const isActive = props.activeItem === menuItem.module || menuItem.label === props.activeItem;
            const className = (0, join_1.default)(baseClassName, isActive && `${baseClassName}--active`);
            let customIcon = (_d = (_c = (_b = (_a = props.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : null;
            const dataName = menuItem.module === 'CustomSettingsPanel'
                ? `CSP-${menuItem.label}`
                : (_e = menuItem.module) !== null && _e !== void 0 ? _e : menuItem.label;
            return (React.createElement("li", { className: className, key: menuItem.label },
                React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                        dispatch(menuItem.reduxAction);
                    }, "data-name": dataName },
                    props.api.optionsApi.getSettingsPanelOptions().showModuleIcons && menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
                    customIcon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }),
                    menuItem.label)));
        }))));
};
exports.Navigation = Navigation;
