// List component
// --------------------------------------------------
// Props:
// - children: content to display
// - style: style of list
// - data: data to display
// - renderItem: function to render each item
// - keyExtractor: function to extract key from item
// - ItemSeparatorComponent: component to display between items
// - ListHeaderComponent: component to display at top of list
// - ListFooterComponent: component to display at bottom of list
// - ListEmptyComponent: component to display when list is empty
// - onRefresh: function to call when list is refreshed
// - refreshing: whether list is refreshing
// - onEndReached: function to call when list is scrolled to end
// - onEndReachedThreshold: threshold to call onEndReached
// - onScroll: function to call when list is scrolled
// - scrollEnabled: whether list is scrollable
// - horizontal: whether list is horizontal
// - showsHorizontalScrollIndicator: whether list shows horizontal scroll indicator
// - showsVerticalScrollIndicator: whether list shows vertical scroll indicator
// - initialNumToRender: number of items to render initially
// - maxToRenderPerBatch: maximum number of items to render per batch
// - windowSize: number of items to render before and after visible area
// - removeClippedSubviews: whether to remove clipped subviews
// - getItemLayout: function to get layout of item
// - numColumns: number of columns to display
// - columnWrapperStyle: style of column wrapper
// - extraData: extra data to pass to renderItem
// - contentContainerStyle: style of content container
// - keyboardShouldPersistTaps: whether keyboard should persist taps
// - keyboardDismissMode: keyboard dismiss mode
// - inverted: whether list is inverted
// - stickyHeaderIndices: indices of sticky headers
// - onScrollToIndexFailed: function to call when scrollToIndex fails
// - viewabilityConfig: viewability config
// - onViewableItemsChanged: function to call when viewable items change
// - viewabilityConfigCallbackPairs: viewability config callback pairs
// - debug: whether to debug list

import React from 'react'
import {
  FlatList,
  StyleSheet,
  View,
  Text,
  ActivityIndicator,
} from 'react-native'
import { colors, spacing } from '../theme'

const List = ({
  children,
  style,
  data,
  separator,
  renderItem,
  showsHorizontalScrollIndicator = false,
  showsVerticalScrollIndicator = false,

  ...otherProps
}) => {
  if (children) {
    return <View style={[styles.container, style]}>{children}</View>
  }

  if (data && data.length === 0) {
    return (
      <View style={[styles.container, style]}>
        <Text style={styles.emptyText}>No data</Text>
      </View>
    )
  }

  return (
    <FlatList
      style={[styles.container, style]}
      data={data}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
      ItemSeparatorComponent={separator ? Separator : null}
      ListEmptyComponent={Empty}
      // other props here
      {...otherProps}
    />
  )
}

const Separator = () => <View style={styles.separator} />

const Empty = () => (
  <View style={styles.empty}>
    <ActivityIndicator size='large' color={colors.primary} />
  </View>
)

const styles = StyleSheet.create({
  container: {},
  separator: {
    height: 1,
    backgroundColor: colors.n_200,
  },
  empty: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyText: {
    color: colors.gray,
    fontSize: 16,
    textAlign: 'center',
  },
})

export default List