import { Box, BoxProps } from '@wix/design-system';
import React, { useEffect, useLayoutEffect } from 'react';
import { HorizontalSpaceAvailableState } from '../../state/Responsive/HorizontalSpaceAvailableState';

export interface HorizontalAvailableSpaceBoxProps extends Partial<BoxProps> {
  state: HorizontalSpaceAvailableState;
}

export function HorizontalAvailableSpaceBox(
  props: HorizontalAvailableSpaceBoxProps,
) {
  const { state, children, ...rest } = props;

  useLayoutEffect(() => state.initLayout(), []);
  useEffect(() => state.init(), []);

  return (
    <Box
      ref={(element) => {
        state._element = element;
        state._child = element?.firstElementChild as Element | null;
      }}
      minWidth={0}
      flex={1}
      align="right"
      direction="horizontal"
      {...rest}
    >
      {children}
    </Box>
  );
}
