import React, { useState } from 'react';
import { LayoutAnimation, SafeAreaView, StyleSheet } from 'react-native';
import {
  SwipeableFlatList,
  SwipeableQuickActionButton,
  SwipeableQuickActions,
} from 'react-native-swipe-list';
import { ListItem } from './ListItem';
const styles = StyleSheet.create({
  container: { flex: 1 },
});

const initialData = [...Array(30)].map((_, index) => ({
  id: index,
  text: `Item ${index}`,
}));

export const TestModule = () => {
  const [data, setData] = useState(initialData);

  return (
    <SafeAreaView style={styles.container}>
      <SwipeableFlatList
        data={data}
        renderItem={({ item }) => <ListItem {...item} />}
        keyExtractor={index => index.id}
        renderLeftActions={({ item }) => (
          <SwipeableQuickActions>
            <SwipeableQuickActionButton
              onPress={() => {
                LayoutAnimation.configureNext(
                  LayoutAnimation.Presets.easeInEaseOut,
                );
                setData(data.filter(value => value !== item.album));
              }}
              text="delete"
              textStyle={{ fontWeight: 'bold', color: 'white' }}
            />
          </SwipeableQuickActions>
        )}
        renderRightActions={({ item }) => (
          <SwipeableQuickActions>
            <SwipeableQuickActionButton onPress={() => {}} text="Other" />
            <SwipeableQuickActionButton onPress={() => {}} text="Flag" />
            <SwipeableQuickActionButton onPress={() => {}} text="Archive" />
          </SwipeableQuickActions>
        )}
      />
    </SafeAreaView>
  );
};