import { useState } from 'react';
import { FlatList, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { Book } from './Book';
import {
  Container,
  Headline,
  Separator,
  ListItem,
  Search,
} from './List.styles';

const books: Book[] = [
  {
    id: 1,
    title: 'JavaScript - das umfassende Handbuch',
    author: 'Philip Ackermann',
    isbn: '978-3836286299',
    rating: 5,
  },
  {
    id: 2,
    title: 'Clean Code',
    author: 'Robert Martin',
    isbn: '978-0132350884',
    rating: 4,
  },
  {
    id: 3,
    title: 'Design Patterns',
    author: 'Erich Gamma',
    isbn: '978-0201633610',
    rating: 5,
  },
];

const List: React.FC = () => {
  const [filter, setFilter] = useState('');

  const filteredBooks = books.filter((book) =>
    book.title.toLowerCase().includes(filter.toLowerCase()),
  );

  return (
    <SafeAreaView style={{ flex: 1 }} edges={['top', 'left', 'right']}>
      <Container>
        <Headline>Bücherverwaltung</Headline>

        <Search
          autoCapitalize="none"
          value={filter}
          onChangeText={(text: string) => setFilter(text)}
          placeholder="Suche"
          placeholderTextColor="grey"
        />

        <FlatList<Book>
          data={filteredBooks}
          keyExtractor={(item) => item.id.toString()}
          ItemSeparatorComponent={() => <Separator />}
          renderItem={({ item }) => (
            <ListItem>
              <Text style={{ color: 'black' }}>{item.title}</Text>
            </ListItem>
          )}
        />
      </Container>
    </SafeAreaView>
  );
};

export default List;
