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 './Loading'
import firebase from 'firebase';
import { styles } from "../config/styles";
import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground} from "react-native";

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>
    <ImageBackground style={styles.stdcontainer} source={require('../assets/yellow-white.jpg')}>
        <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='Ver mensajes'
        onPress={() => navigation.navigate('Add')}
      />

        <Button
        title ='Hacer Busqueda'
        onPress= {() => navigation.navigate('Room')}
        />
        </ImageBackground>
      </View>
    );
  }