import * as React from 'react';
import { useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
import clsx from 'clsx';
import { AdaptableIconComponent } from '../../AdaptableIconComponent';
import { targetOwn } from '../../../../components/twUtils';
import { useAdaptable } from '../../../AdaptableContext';
const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
    const ref = useRef(null);
    useEffect(() => {
        if (isActive) {
            ref.current?.focus();
        }
    }, [isActive]);
    return (React.createElement("li", { className: clsx(navigationItemClassName, {
            [`${navigationItemClassName}--active`]: isActive,
        }) },
        React.createElement("button", { ref: ref, type: "button", className: clsx(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
                'twa:flex twa:flex-row twa:items-center twa:gap-2': 'layout flex',
                [`twa:bg-transparent`]: !isActive,
                'twa:bg-accent twa:text-accentlight': isActive,
                'twa:px-2 twa:py-1.5': true,
                'twa:rounded-standard': true,
            }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1 },
            showModuleIcons && menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })),
            customIcon ? React.createElement(AdaptableIconComponent, { icon: customIcon }) : null,
            menuItem.label)));
};
export const Navigation = (props) => {
    const { api } = useAdaptable();
    const makeActive = (menuItem) => {
        dispatch(menuItem.reduxAction);
    };
    const getMenuItemForDirection = (direction) => {
        const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
        let foundMenuItem = null;
        if (direction === -1) {
            let candidate = props.menuItems[currentIndex - 1] !== '-'
                ? props.menuItems[currentIndex - 1]
                : props.menuItems[currentIndex - 2];
            foundMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
        }
        else {
            let candidate = props.menuItems[currentIndex + 1] !== '-'
                ? props.menuItems[currentIndex + 1]
                : props.menuItems[currentIndex + 2];
            foundMenuItem = candidate ? candidate : props.menuItems[0];
        }
        return foundMenuItem === '-' ? null : foundMenuItem;
    };
    const dispatch = useDispatch();
    const handleKeyPress = React.useCallback((event) => {
        const { code } = event;
        if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
            event.preventDefault();
            event.stopPropagation();
            let nextMenuItem = null;
            if (code === 'Home') {
                nextMenuItem = props.menuItems[0];
            }
            else if (code === 'End') {
                nextMenuItem = props.menuItems[props.menuItems.length - 1];
            }
            else {
                nextMenuItem = getMenuItemForDirection(event.code === 'ArrowUp' ? -1 : 1);
            }
            if (nextMenuItem) {
                makeActive(nextMenuItem);
            }
        }
    }, [props.activeItem, props.menuItems]);
    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1 },
        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress }, props.menuItems.map((menuItem, index) => {
            if (menuItem === '-') {
                return (React.createElement("li", { key: `separator-${index}`, className: `${navigationItemClassName}__Separator` }));
            }
            const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
            let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
            const dataName = menuItem.category === 'CustomSettingsPanel'
                ? `CSP-${menuItem.label}`
                : menuItem.category ?? menuItem.label;
            return (React.createElement(NavigationItem, { key: menuItem.label, menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }));
        }))));
};
