import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Collapse } from '../../../../components/Collapse';
import { Tooltip } from '../../../../components/Tooltip';
import { ActionWrapper, DesktopActionWrapper, MobileActionWrapper, StyledButton, StyledMobileButton, } from './styles';
import { useLogic } from './useLogic';
export const SecondaryActions = (props) => {
    const { isDisabled, actions, isActive, isDisablePadding = false } = props;
    const { isShowCollapseActions } = useLogic(props);
    const renderMobileButton = ({ text, disabled, isBlockingOperation, ...restButtonProps }) => (_jsx(StyledMobileButton, { disabled: isDisabled || disabled, variant: "outlined", color: "grey", ...restButtonProps, children: text }, text));
    return (_jsxs(_Fragment, { children: [_jsx(MobileActionWrapper, { children: isShowCollapseActions ? (_jsx(Collapse, { in: isActive, children: _jsx(ActionWrapper, { "$isDisablePadding": isDisablePadding, children: actions.map(renderMobileButton) }) })) : (_jsx(ActionWrapper, { "$isDisablePadding": isDisablePadding, children: renderMobileButton(actions[0]) })) }), _jsx(DesktopActionWrapper, { children: actions?.map((action) => {
                    const { text, disabled, disabledReason, loading, isBlockingOperation, ...restActionProps } = action;
                    return (_jsx(Tooltip, { title: disabled && disabledReason, withoutContainer: !(isDisabled || disabled), children: _jsx(StyledButton, { disabled: isDisabled || disabled, loading: loading, size: "large", color: "grey", variant: "outlined", ...restActionProps, children: text }) }, text));
                }) })] }));
};
