import * as React from 'react';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getStatusPanelsSelector } from '../../Redux/ActionsReducers/StatusBarRedux';
import { useAdaptable } from '../AdaptableContext';
import { StatusBarPanel } from './StatusBarPanel';
import { useRerender } from '../../components/utils/useRerender';
import { Flex } from '../../components/Flex';
export const AdaptableStatusBar = (props) => {
    const adaptable = useAdaptable();
    const rerender = useRerender();
    useEffect(() => {
        return adaptable.api.eventApi.on('AdaptableStateChanged', rerender);
    }, [adaptable]);
    const statusPanels = useSelector(getStatusPanelsSelector);
    const dispatch = useDispatch();
    const statusSubPanels = statusPanels.find((statusPanel) => statusPanel.Key === props.context.Key);
    const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
    return (React.createElement(Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
        const module = adaptable.ModuleService.getModuleById(subPanel);
        if (!module?.isModuleVisible()) {
            return React.createElement(React.Fragment, { key: subPanel });
        }
        /**
         * Both view properties and status panel are optional.
         */
        const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
        const moduleInfo = module.moduleInfo;
        const onAction = statusBarPanelProps.onAction ??
            (() => {
                // #by-default-open-settings-panel-for-module
                const menuItem = allMenuItems.find((menuItem) => menuItem.category === subPanel);
                if (menuItem?.reduxAction) {
                    dispatch(menuItem.reduxAction);
                }
            });
        return (React.createElement(StatusBarPanel, { "data-name": subPanel, ...statusBarPanelProps, tooltip: moduleInfo.FriendlyName, onAction: onAction, icon: statusBarPanelProps.icon ?? moduleInfo.Glyph, key: subPanel }));
    })));
};
