import * as React from 'react';
import { Button, View, StyleSheet, FlatList } from 'react-native';

export default class App extends React.Component {
  state = {
    items: [
      { id: 1, isRead: false },
      { id: 2, isRead: false },
      { id: 3, isRead: true },
      { id: 4, isRead: true },
      { id: 5, isRead: true },
      { id: 6, isRead: false },
      { id: 7, isRead: false },
      { id: 8, isRead: false },
      { id: 9, isRead: false },
      { id: 10, isRead: false },
    ],
  };

  renderItem = ({ item }) => (
    <View
      style={{
        flex: 1,
        height: 50,
        backgroundColor: item.isRead ? '#999999' : '#CCCCCC',
      }}
    />
  );

  renderSeparator = ({ leadingItem }) => (
    <View
      style={{
        width: '100%',
        height: 2,
        backgroundColor: leadingItem && leadingItem.isRead ? 'black' : 'blue',
      }}
    />
  );

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          ItemSeparatorComponent={this.renderSeparator}
          data={this.state.items}
          renderItem={this.renderItem}
          style={{ flex: 1 }}
        />

        <Button
          title="Mark all as read"
          onPress={() =>
            this.setState(state => ({
              items: state.items.map(item => ({ ...item, isRead: true })),
            }))
          }
        />
        <Button
          title="Mark all as unread"
          onPress={() =>
            this.setState(state => ({
              items: state.items.map(item => ({ ...item, isRead: false })),
            }))
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 21,
    backgroundColor: '#ecf0f1',
  },
});