import React, { FC, useContext } from 'react';
import { SectionList, SectionListProps, View } from 'react-native';
import Item from './Item';
import { GridContext } from './index';
import styles from './styles';
import { SpanNumber } from './types';

export interface ItemSectionListProps extends SectionListProps<any> {
  /**
   * Represents the width of the Card component in terms of span numbers (1-12).
   */
  widthSpan?: SpanNumber;
}

const ItemSectionList: FC<ItemSectionListProps> = ({
  renderItem,
  widthSpan,
  style,
  contentContainerStyle,
  ...props
}) => {
  const { gutterSize, numberOfColumns } = useContext(GridContext);
  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
  const _renderItem = (item: any) => {
    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
  };

  return (
    <SectionList
      {...props}
      renderItem={_renderItem}
      horizontal={false}
      ItemSeparatorComponent={() => <View style={{ height: gutterSize }} />}
      style={[style, styles.protectedStyle]}
      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
    />
  );
};

export default ItemSectionList;