import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { TableFoldersState } from '../../state';
import { PageInfiniteScrollLoader } from '../PageInfiniteScrollLoader';

export interface TableFoldersInfiniteScrollProps<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> {
  state: TableFoldersState<T1, F1, T2, F2>;
}

function _TableFoldersInfiniteScroll<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
>(props: TableFoldersInfiniteScrollProps<T1, F1, T2, F2>) {
  const {
    state: { showFoldersSection, showItemsSection, collections },
  } = props;

  return (
    <>
      {showFoldersSection && (
        <PageInfiniteScrollLoader
          state={collections.folders}
          scrollMoreAlways
        />
      )}

      {showItemsSection && (
        <PageInfiniteScrollLoader state={collections.items} scrollMoreAlways />
      )}
    </>
  );
}

export const TableFoldersInfiniteScroll = observer(_TableFoldersInfiniteScroll);