import React, {memo} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {MetaPreview} from '../../api/addonTypes';
import {dimensions} from '../../utils/dimensions';
import Card from '../common/Card';
import LoadingSpinner from '../common/LoadingSpinner';

interface Props {
  items: MetaPreview[];
  loading?: boolean;
  onPressItem: (item: MetaPreview) => void;
  onEndReached?: () => void;
  numColumns?: number;
}

const CatalogGrid = memo(function CatalogGrid({
  items,
  loading,
  onPressItem,
  onEndReached,
  numColumns = 3,
}: Props) {
  const cardWidth =
    (dimensions.screenWidth - 32 - (numColumns - 1) * 8) / numColumns;

  return (
    <FlatList
      data={items}
      numColumns={numColumns}
      keyExtractor={i => i.id}
      contentContainerStyle={styles.grid}
      columnWrapperStyle={numColumns > 1 ? styles.row : undefined}
      renderItem={({item}) => (
        <Card
          item={item}
          onPress={onPressItem}
          size="small"
          style={{width: cardWidth, marginRight: 0}}
        />
      )}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      ListFooterComponent={loading ? <LoadingSpinner /> : null}
      removeClippedSubviews
      initialNumToRender={12}
      maxToRenderPerBatch={6}
      windowSize={5}
    />
  );
});

export default CatalogGrid;

const styles = StyleSheet.create({
  grid: {paddingHorizontal: 16, paddingBottom: 20},
  row: {justifyContent: 'space-between', marginBottom: 10},
});