import { Box, BoxProps } from '@wix/design-system';
import React, { Children, useEffect } from 'react';
import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
import { observer } from 'mobx-react-lite';

export interface ToolbarGroupScrollWidthBoxProps extends Partial<BoxProps> {
  state: ToolbarResponsivePriorityState;
}

function _ToolbarGroupScrollWidthBox(props: ToolbarGroupScrollWidthBoxProps) {
  const { state, children, ...rest } = props;

  useEffect(() => {
    state._syncWidth();
  }, [state._shouldShrink]);

  if (!Children.toArray(children).length) {
    return null;
  }

  return (
    <Box
      ref={(el) => {
        state._groupElement = el;
      }}
      direction="horizontal"
      {...rest}
    >
      {children}
    </Box>
  );
}

export const ToolbarGroupScrollWidthBox = observer(_ToolbarGroupScrollWidthBox);