import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useRef, useState } from 'react';
import styled, { css } from 'styled-components';
import Flex from '../Flex';
import { StyledButton } from '../Button';
export const StyledResponsiveActionsContainer = styled.div(({ stacked }) => css `
    ${StyledButton} + ${StyledButton} {
      margin-inline-start: unset;
    }

    & > :not(button) {
      display: contents;
    }

    ${!stacked &&
    css `
      & > button:first-child:not(:last-child),
      & > :first-child:not(:last-child) button:first-child {
        margin-inline-end: auto;
      }
    `}

    &[aria-hidden='true'] {
      position: fixed;
      visibility: hidden;
    }
  `);
const ResponsiveActions = ({ actionsRef, actionsEl, as, ...restProps }) => {
    const hiddenActionsRef = useRef(null);
    const [stacked, setStacked] = useState(false);
    useLayoutEffect(() => {
        if (hiddenActionsRef.current && actionsRef.current) {
            const minInlineWidth = hiddenActionsRef.current.getBoundingClientRect().width;
            const resizeObserver = new ResizeObserver(entries => {
                setTimeout(() => {
                    if (stacked && entries[0].borderBoxSize[0].inlineSize > minInlineWidth) {
                        setStacked(false);
                    }
                    else if (!stacked && entries[0].borderBoxSize[0].inlineSize <= minInlineWidth) {
                        setStacked(true);
                    }
                }, 0);
            });
            resizeObserver.observe(actionsRef.current);
            return () => {
                resizeObserver.disconnect();
            };
        }
    });
    useLayoutEffect(() => {
        if (hiddenActionsRef.current) {
            const buttonEls = hiddenActionsRef.current.getElementsByTagName('button');
            Array.from(buttonEls).forEach(button => {
                if (button.hasAttribute('id')) {
                    button.removeAttribute('id');
                }
                if (button.hasAttribute('data-testid')) {
                    button.removeAttribute('data-testid');
                }
                button.setAttribute('role', 'none');
            });
        }
    });
    return (_jsxs(_Fragment, { children: [_jsx(Flex, { ...restProps, as: StyledResponsiveActionsContainer, forwardedAs: as, ref: actionsRef, stacked: stacked, container: {
                    gap: 1,
                    ...(stacked ? { direction: 'column' } : { justify: 'end' })
                }, children: actionsEl }), _jsx(Flex, { as: StyledResponsiveActionsContainer, ref: hiddenActionsRef, "aria-hidden": true, inert: '', container: {
                    gap: 1,
                    direction: 'row',
                    justify: 'end'
                }, children: actionsEl })] }));
};
export default ResponsiveActions;
//# sourceMappingURL=ResponsiveActions.js.map