import { FiltersMap } from '@wix/bex-core';
import React, { ReactNode, useEffect, useLayoutEffect } from 'react';
import { ToolbarState } from './ToolbarState';
import { usePageScrollContext } from '@wix/design-system';

export function ToolbarAndTitlebarContainer<T, F extends FiltersMap>({
  state,
  children,
}: {
  state: ToolbarState<T, F>;
  children?: ReactNode;
}) {
  const { scrollableContentRef: scrollablePageRef } = usePageScrollContext();

  useLayoutEffect(() => {
    state.toolbar.toolbarRect._syncThrottled();
  }, []);

  useEffect(() => {
    return state.init({
      scrollElement: scrollablePageRef.current,
    });
  }, []);

  return (
    <div
      data-hook="toolbar-and-titlebar-container"
      ref={(el) => {
        state.toolbar.toolbarRect.element = el;
      }}
    >
      {children}
    </div>
  );
}