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";

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' 
import { fetchUser } from '../../redux/actions/index'

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

  useEffect(() => {

    const fire = firebase.firestore()
    .collection('THREADS')
    .where("members", "array-contains", firebase.auth().currentUser.uid)
    .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 />;
  }


  function handleButtonPress() {
      firebase.firestore()
        .collection('THREADS')
        .add({
          name: 'PedroFecha',
          members: [
            firebase.auth().currentUser.uid,
            '02yOZHxFcGUX4MNwjeEbAlCShdu1'
          ]
        })
        //.then(() => {
          //navigation.navigate('allChats');
         //});
  }

  return (
      <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}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
        />
        
      <Button
        title='CrearChat'
        onPress={() => handleButtonPress()}
      />
      <Button
        title ='Hacer Busqueda'
        onPress= {() => navigation.navigate('Search')}
      />
        </ImageBackground>
    );
  }

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(Home_page);