import React, {useState, useEffect} from 'react'
import { Button, Text, View, StyleSheet} from 'react-native'
import {FlatList, ListViewBase } from 'react-native'
import {TouchableOpacity} from 'react-native-gesture-handler'
import {List, Divider} from 'react-native-paper'
import Loading from '../components/Loading'
import firebase from 'firebase';


export default function Home_page({navigation}) {
  const [threads, setThreads] = useState([]);  
  const [loading, setLoading] = useState(true);

  useEffect(() => {

    const fire = firebase.firestore()
    .collection('THREADS')
    
    .onSnapshot(querySnapshot => {
      const threads = querySnapshot.docs.map(documentSnapshot => {
        return{
          _id:documentSnapshot.id,
          name:'',
          ...documentSnapshot.data()
        };

      });

      setThreads(threads);

      if(loading){
        setLoading(false);
      }

    });

    return () => fire();
  }, []);
  
  if (loading) {
    return <Loading />;
  }
  
  return (
      <View style={styles.container}>
        <FlatList
          data={threads}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (

            <TouchableOpacity
            onPress={() => navigation.navigate('Room', {thread: item})}
            
            >
            <List.Item
              title={item.name}
              description='Item description'
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
      />

      <Button
        title='Add Room'
        onPress={() => navigation.navigate('Add')}
      />

        <Button
        title ='Room'
        onPress= {() => navigation.navigate('Room')}
        />

      </View>
    );
  }
  const styles = StyleSheet.create({
    container: {
      backgroundColor: '#f5f5f5',
      flex: 1
    },
    listTitle: {
      fontSize: 22
    },
    listDescription: {
      fontSize: 16
    }
  });