import { observer } from 'mobx-react-lite';
import React, { ReactNode, useEffect, useLayoutEffect } from 'react';
import { Box } from '@wix/design-system';
import { FiltersMap } from '@wix/bex-core';
import { GridBaseState } from '../../state';

export interface GridFoldersSectionProps<T, F extends FiltersMap> {
  dataHook?: string;
  state: GridBaseState<T, F>;
  header?: ReactNode;
  children?: ReactNode;
}

function _GridFoldersSection<T, F extends FiltersMap>(
  props: GridFoldersSectionProps<T, F>,
) {
  const { dataHook, state, header, children } = props;
  const {
    toolbar: { contentPaddingPx },
  } = state;

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

  return (
    <div data-hook={dataHook}>
      {header}
      <Box
        direction="vertical"
        paddingTop={contentPaddingPx}
        paddingRight={contentPaddingPx}
        paddingLeft={contentPaddingPx}
      >
        <div
          ref={(el) => {
            state._containerRectState.element = el;
          }}
        >
          {children}
        </div>
      </Box>
    </div>
  );
}

export const GridFoldersSection = observer(_GridFoldersSection);