import * as React from 'react';
import Panel from '../../../../components/Panel';
import SimpleButton from '../../../../components/SimpleButton';
import { Box, Flex } from '../../../../components/Flex';
import clsx from 'clsx';
import { useEffect, useLayoutEffect } from 'react';
const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
    return (React.createElement(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick },
        React.createElement(Box, { className: "twa:mr-2" }, icon),
        React.createElement(Box, { className: "twa:text-2" }, label)));
};
export const ColumnFilterMenu = (props) => {
    const [activeIndex, setActiveIndex] = React.useState(() => {
        const index = props.predicateDefs.findIndex((predicateDef) => predicateDef.operator === props.predicate.operator);
        return index === -1 ? 0 : index;
    });
    const activeIndexRef = React.useRef(activeIndex);
    const onPredicateChangeRef = React.useRef(props.onPredicateChange);
    const predicateDefsRef = React.useRef(props.predicateDefs);
    useLayoutEffect(() => {
        activeIndexRef.current = activeIndex;
        onPredicateChangeRef.current = props.onPredicateChange;
        predicateDefsRef.current = props.predicateDefs;
    });
    const confirm = React.useCallback((predicateDef) => {
        onPredicateChangeRef.current({ operator: predicateDef.operator, args: [] });
    }, []);
    useEffect(() => {
        const onKeyDown = (e) => {
            // Only handle arrow keys and Enter - let other keys (like Tab) pass through
            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Enter') {
                return;
            }
            const activeIndex = activeIndexRef.current;
            const predicateDefs = predicateDefsRef.current;
            if (e.key === 'Enter') {
                const predicateDef = predicateDefs[activeIndex];
                if (predicateDef) {
                    confirm(predicateDef);
                }
            }
            e.stopPropagation();
            e.preventDefault();
            const dir = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0;
            if (dir) {
                let nextIndex = activeIndex + dir;
                if (nextIndex < 0) {
                    nextIndex = predicateDefs.length - 1;
                }
                else if (nextIndex >= predicateDefs.length) {
                    nextIndex = 0;
                }
                setActiveIndex(nextIndex);
            }
        };
        document.addEventListener('keydown', onKeyDown);
        return () => {
            document.removeEventListener('keydown', onKeyDown);
        };
    }, [confirm]);
    return (React.createElement(Panel, { className: "twa:min-w-max" }, props.predicateDefs?.map((predicateDef, index) => {
        const active = activeIndex === index;
        return (React.createElement(Flex, { className: clsx("twa:mb-1", active && "twa:bg-primarylight"), key: index, onMouseDownCapture: (e) => {
                e.stopPropagation();
                e.preventDefault();
            } },
            React.createElement(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active })));
    })));
};
