import { GridSectionHeader } from './GridSectionHeader';
import { VirtualGridRepeater } from '../VirtualGridRepeater/VirtualGridRepeater';
import { PageGridInfiniteScrollLoader } from '../PageGridInfiniteScrollLoader';
import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import { GridFoldersSection } from './GridFoldersSection';
import { GridFoldersState } from '../../state';
import { RenderItem } from './RenderItem';
import { InitialSkeletonLoader } from '../InitialLoader/InitialSkeletonLoader';

export interface GridFoldersItemsSectionProps<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> {
  state: GridFoldersState<T1, F1, T2, F2>;
  sectionTitle?: string;
  renderItem: RenderItem;
}

function _GridFoldersItemsSection<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
>({
  state,
  renderItem,
  sectionTitle,
}: GridFoldersItemsSectionProps<T1, F1, T2, F2>) {
  const {
    container: { translate: t },
    toolbar,
    items: {
      collection: { showRefreshLoader },
    },
  } = state;

  return (
    <GridFoldersSection
      state={state.items}
      dataHook="items-section"
      header={
        state.showItemsSectionHeader && (
          <GridSectionHeader
            state={toolbar}
            sectionTitle={sectionTitle ?? t('section.header.items')}
          />
        )
      }
    >
      <VirtualGridRepeater renderItem={renderItem} gridState={state.items} />

      {showRefreshLoader && (
        <InitialSkeletonLoader dataHook="refresh-loader" state={state.items} />
      )}

      <PageGridInfiniteScrollLoader
        dataHook="items-infinite-scroll-loader"
        state={state.items}
        scrollMoreAlways
      />
    </GridFoldersSection>
  );
}

export const GridFoldersItemsSection = observer(_GridFoldersItemsSection);