import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { SectionRange } from './GridSectionsState';
import { observer } from 'mobx-react-lite';
import { GridSectionsSectionState } from './GridSectionsSectionState';
import { CollectionSectionHeader } from '../CollectionSectionHeader';

export interface GridSectionHeaderProps<T, F extends FiltersMap> {
  sectionDescriptor: SectionRange;
  state: GridSectionsSectionState<T, F>;
}

function _GridSectionHeader<T, F extends FiltersMap>(
  props: GridSectionHeaderProps<T, F>,
) {
  const { sectionDescriptor, state } = props;

  const {
    gridBase: { layoutType },
  } = state;

  const { sectionId, sectionIndex, section, range } = sectionDescriptor;

  const sectionWithCount = {
    ...section,
    count: range.length,
    hasMore: state.isLast && !state.gridSections.collection.fetchedLastPage,
  };

  return (
    <CollectionSectionHeader
      dataHook="grid-section-header"
      sectionId={sectionId}
      sectionIndex={sectionIndex}
      section={sectionWithCount}
      skin={layoutType === 'list' ? 'light' : 'neutral'}
      biComponentType="GridSections"
    />
  );
}

export const GridSectionHeader = observer(_GridSectionHeader);