import React, { useCallback, useEffect, useRef, useState, } from 'react';
import { Box, IconButton, ListItemAction, Popover, Text, TextButton, Thumbnail, } from '@wix/design-system';
import { ChevronLeft, DataCollection, MoreSmall, } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { layoutOptions, layoutConfig, } from '../TableGridSwitchButton/layoutConfig';
export function ToolbarOverflowMenu({ primaryItems, secondaryItems, layoutSwitchConfig, }) {
    const [shown, setShown] = useState(false);
    const [activeView, setActiveView] = useState('main');
    const triggerRef = useRef(null);
    const focusTargetRef = useRef(null);
    const { translate: t } = useWixPatternsContainer();
    const shouldFocusTriggerOnCloseRef = useRef(false);
    const close = useCallback(() => {
        setShown(false);
        setActiveView('main');
    }, []);
    const closeAndFocusTrigger = useCallback(() => {
        shouldFocusTriggerOnCloseRef.current = true;
        close();
    }, [close]);
    useEffect(() => {
        if (!shown && shouldFocusTriggerOnCloseRef.current) {
            shouldFocusTriggerOnCloseRef.current = false;
            setTimeout(() => {
                triggerRef.current?.focus();
            });
        }
    }, [shown]);
    const hasItems = primaryItems.length > 0 ||
        secondaryItems.length > 0 ||
        !!layoutSwitchConfig;
    if (!hasItems) {
        return null;
    }
    return (React.createElement(Popover, { dataHook: "toolbar-overflow-menu", shown: shown, placement: "bottom", showArrow: true, flip: true, appendTo: "parent", onClickOutside: closeAndFocusTrigger, onEscPress: closeAndFocusTrigger, onTabOut: close, zIndex: 1101 },
        React.createElement(Popover.Element, null,
            React.createElement(IconButton, { ref: triggerRef, size: "small", skin: "inverted", dataHook: "toolbar-overflow-menu-trigger", "aria-label": t('cairo.moreActions'), onClick: () => {
                    setShown((prev) => {
                        if (!prev) {
                            focusTargetRef.current = 'first';
                        }
                        return !prev;
                    });
                } },
                React.createElement(MoreSmall, null))),
        React.createElement(Popover.Content, null,
            React.createElement(Box, { dataHook: "toolbar-overflow-menu-content", direction: "vertical", minWidth: activeView === 'main' ? '300px' : '184px', paddingTop: "SP1", paddingBottom: "SP1" }, activeView === 'main' ? (React.createElement(MainView, { primaryItems: primaryItems, secondaryItems: secondaryItems, layoutSwitchConfig: layoutSwitchConfig, onItemClick: closeAndFocusTrigger, onLayoutSwitchClick: () => setActiveView('layout'), focusTarget: focusTargetRef, t: t })) : (React.createElement(LayoutSwitchView, { config: layoutSwitchConfig, onBack: () => {
                    focusTargetRef.current = 'layoutSwitch';
                    setActiveView('main');
                }, onSelect: closeAndFocusTrigger, t: t }))))));
}
function MainView({ primaryItems, secondaryItems, layoutSwitchConfig, onItemClick, onLayoutSwitchClick, focusTarget, t, }) {
    const firstItemRef = useRef(null);
    const layoutSwitchRef = useRef(null);
    useEffect(() => {
        const target = focusTarget.current;
        focusTarget.current = null;
        if (target === 'first') {
            firstItemRef.current?.focus();
        }
        else if (target === 'layoutSwitch') {
            layoutSwitchRef.current?.focus();
        }
    });
    const isFirstItemPrimary = primaryItems.length > 0;
    return (React.createElement(React.Fragment, null,
        primaryItems.length > 0 && (React.createElement(Box, { direction: "horizontal", gap: "SP2", padding: "SP2" }, primaryItems.map((item, index) => (React.createElement(Box, { key: index, flex: 1, minWidth: 0 },
            React.createElement(Thumbnail, { ref: index === 0 ? firstItemRef : undefined, size: "tiny", skin: "secondary", image: item.icon, onClick: () => {
                    item.onClick();
                    onItemClick();
                }, dataHook: item.dataHook, title: React.createElement(Text, { size: "medium", weight: "thin" }, item.text), width: "100%" })))))),
        layoutSwitchConfig && (React.createElement(ListItemAction, { ref: !isFirstItemPrimary
                ? (r) => {
                    layoutSwitchRef.current = r;
                    if (!firstItemRef.current) {
                        firstItemRef.current = r;
                    }
                }
                : layoutSwitchRef, size: "medium", dataHook: "overflow-layout-switch", prefixIcon: React.createElement(DataCollection, null), title: t('cairo.table.layout.switchLayout'), onClick: () => {
                layoutSwitchConfig.viewTypeState.reportLayoutSwitch();
                onLayoutSwitchClick();
            } })),
        secondaryItems.map((item, index) => (React.createElement(ListItemAction, { key: index, ref: !isFirstItemPrimary && !layoutSwitchConfig && index === 0
                ? firstItemRef
                : undefined, size: "medium", title: item.text, onClick: () => {
                item.onClick();
                onItemClick();
            }, prefixIcon: item.prefixIcon, dataHook: item.dataHook })))));
}
function LayoutSwitchView({ config, onBack, onSelect, t, }) {
    const { viewTypeState } = config;
    const activeOptionRef = useRef(null);
    useEffect(() => {
        activeOptionRef.current?.focus();
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(Box, { padding: "SP1 SP3" },
            React.createElement(TextButton, { size: "small", dataHook: "overflow-layout-switch-back", prefixIcon: React.createElement(ChevronLeft, null), onClick: onBack }, t('cairo.import.back'))),
        layoutOptions.map((option, index) => {
            const isActive = viewTypeState.viewType === option;
            return (React.createElement(ListItemAction, { key: option, ref: isActive ? activeOptionRef : undefined, size: "medium", dataHook: `overflow-layout-option-${option}`, prefixIcon: layoutConfig[option].icon, title: t(layoutConfig[option].translationKey), highlighted: isActive ? true : undefined, onClick: () => {
                    viewTypeState.reportLayoutOptionClicked(option, index);
                    if (!isActive) {
                        viewTypeState.changeViewType(option);
                    }
                    onSelect();
                } }));
        })));
}
//# sourceMappingURL=ToolbarOverflowMenu.js.map