import React, { ReactNode, useMemo } from 'react';
import { Box, Text } from '@wix/design-system';
import { ToolbarCollectionState } from '../../state';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';

interface GridSectionHeaderProps<T, F extends FiltersMap> {
  sectionTitle: ReactNode;
  suffix?: ReactNode;
  state: ToolbarCollectionState<T, F>;
}

function _GridSectionHeader<T, F extends FiltersMap>({
  sectionTitle,
  suffix,
  state,
}: GridSectionHeaderProps<T, F>) {
  const {
    minimizedHeaderHeight,
    toolbarRect: {
      rect: { height: toolbarHeight },
    },
    internalScroll,
  } = state;

  const top = useMemo(() => {
    if (toolbarHeight == null || internalScroll) {
      return 0;
    }

    return toolbarHeight + minimizedHeaderHeight;
  }, [minimizedHeaderHeight, toolbarHeight, internalScroll]);

  return (
    <Box
      dataHook="section-header"
      height="42px"
      verticalAlign="middle"
      align="space-between"
      background="linear-gradient(0deg, rgba(22, 45, 61, 0.03), rgba(22, 45, 61, 0.03)), #FFFFFF"
      paddingRight="30px"
      paddingLeft="30px"
      top={top}
      position="sticky"
      zIndex={2}
    >
      <Text>{sectionTitle}</Text>
      {suffix}
    </Box>
  );
}

export const GridSectionHeader = observer(_GridSectionHeader);