import { GridSectionHeader } from './GridSectionHeader';
import { TextButton } from '@wix/design-system';
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 GridFoldersSectionProps<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> {
  state: GridFoldersState<T1, F1, T2, F2>;
  sectionTitle?: string;
  renderItem: RenderItem;
}

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

  return (
    <GridFoldersSection
      state={state.folders}
      dataHook="folders-section"
      header={
        state.showFoldersSectionHeader && (
          <GridSectionHeader
            state={toolbar}
            suffix={
              state.showToggleShowAllLessButton && (
                <TextButton
                  size="small"
                  onClick={state.toggleShowAllFolders}
                  dataHook="toggle-show-all-folders-button"
                >
                  {state.showAllFolders
                    ? t('cairo.folders.showLess.button')
                    : t('cairo.folders.showAll.button')}
                </TextButton>
              )
            }
            sectionTitle={sectionTitle ?? t('section.header.folders')}
          />
        )
      }
    >
      <VirtualGridRepeater renderItem={renderItem} gridState={state.folders} />

      {showRefreshLoader && (
        <InitialSkeletonLoader
          dataHook="refresh-loader"
          state={state.folders}
        />
      )}
      {state.showAllFolders && (
        <PageGridInfiniteScrollLoader
          dataHook="folders-infinite-scroll-loader"
          state={state.folders}
          scrollMoreAlways
        />
      )}
    </GridFoldersSection>
  );
}

export const GridFoldersFolderSection = observer(_GridFoldersFolderSection);