import { FiltersMap } from '@wix/bex-core';
import {
  GridBaseState,
  gridSizePresets,
  GridState,
  ToolbarCollectionState,
  topGridSizePreset,
} from '../../state';
import React, { useState } from 'react';
import { GridContent, GridContentBaseProps } from '../Grid/GridContent';

export interface GridSectionsSingleSkeletonGridProps<T, F extends FiltersMap>
  extends GridContentBaseProps<T, F> {
  state: GridState<T, F>;
  range?: { start: number; length: number };
}

export function GridSectionsSingleSkeletonGrid<
  T,
  F extends FiltersMap = FiltersMap,
>(props: GridSectionsSingleSkeletonGridProps<T, F>) {
  const { range, imagePlacement, state: parentState, layoutType } = props;

  const { toolbar, collection } = parentState;

  const [state] = useState(
    () =>
      new GridBaseState({
        container: toolbar.container,
        toolbar: toolbar as ToolbarCollectionState<unknown, Partial<F>>,
        collection,
        sizePreset: imagePlacement
          ? gridSizePresets[imagePlacement]
          : topGridSizePreset,
        range,
        parentState,
        layoutType,
      }),
  );

  return (
    <GridContent
      {...props}
      paddingTop={layoutType === 'list' ? 'SP2' : 'SP4'}
      state={state}
      withInfiniteScrollLoader
    />
  );
}