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

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

export function GridSingleGridContent<T, F extends FiltersMap = FiltersMap>(
  props: GridSingleGridContentProps<T, F>,
) {
  const {
    range,
    imagePlacement,
    state: parentState,
    layoutType,
    dragAndDrop,
  } = 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,
        draggable: dragAndDrop ? 'draggable' : 'none',
      }),
  );

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