import React, { useState, useEffect, useCallback } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import firebase from 'firebase';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUser } from '../../redux/actions/index'

export function RoomScreen({ route }) {
  //const { currentUser } = props;
  const { thread } = route.params;
  /*const [messages, setMessages] = useState([
    /**
     * Mock message data
     */
    // example of system message
   /* {
      _id: 0,
      text: 'New room created.',
      createdAt: new Date().getTime(),
      system: true
    },
    // example of chat message
    {
      _id: 1,
      text: 'Henlo!',
      createdAt: new Date().getTime(),
      user: {
        _id: 2,
        name: 'Test User'
      }
    }
  ]);*/

  const [messages, setMessages] = useState([])


  /** the useEffect is used when we first render the component
   *  solo va a corrar al principio.
   */
  useEffect(() => {
    //readUser()
    const unsubscribe = firebase.firestore() 
    .collection('THREADS')
    .doc(thread._id)
    .collection('MESSAGES')
    .onSnapshot(querySanpshot => {
      const messageFirestore = querySanpshot
        .docChanges() //para traer solo lo que haya cambiado
        .filter(({ type }) => type == 'added') //el objeto tiene un prop added, ese es el que queremos
        .map(({ doc }) => {
          const message = doc.data()
          return { ...message, createdAt: new Date().getTime() }
        })
        .sort((a, b) => b.createdAt - a.createdAt)
    appendMessages(messageFirestore) //Para meter el mensaje en el estado messages
    })
    return () => unsubscribe()
  }, [])


  const appendMessages = useCallback((messages) => {
    setMessages((previousMessages) => GiftedChat.append(previousMessages, messages))
  }, [messages])

  async function handleSend(messages) {
    const writes = messages.map(m => firebase.firestore() 
    .collection('THREADS')
    .doc(thread._id)
    .collection('MESSAGES').add(m))
    await Promise.all(writes)
  }

  /*async function handleSend(messages, newMessage = []) {
    const text = messages[0].text;
    setMessages(GiftedChat.append(messages, newMessage));

  //aqui podemos usar current user que no lo hemos usado, ya tenemos conectado redux
    firebase.firestore() 
      .collection('Users')
      .doc(firebase.auth().currentUser.uid)
      .collection('THREADS')
      .doc(thread._id)
      .collection('MESSAGES')
      .add({
        text,
        createdAt: new Date().getTime(),
      });

    //Esto se ve, pero no genraliza, solo funciona desde currentUser y se graba en la otra cuenta, 
    //pero la otra cuenta no puede responder porque pasa a ser current user. 
    //Ademas no guarda que usuario dijo que.
      firebase.firestore() 
      .collection('Users')
      .doc('HGGAJlcIfwdpUoYfcBKLZFcDude2')
      .collection('THREADS')
      .doc(thread._id)
      .collection('MESSAGES')
      .add({
        text,
        createdAt: new Date().getTime(),
      });
  }*/

  // helper method that is sends a message
  /*function handleSend(newMessage = []) {
    setMessages(GiftedChat.append(messages, newMessage));
  }*/

  return (
    /*<GiftedChat
      messages={messages}
      onSend={newMessage => handleSend(messages, newMessage)}
      user={{ _id: 1 }}
      showUserAvatar
      alwaysShowSend
      scrollToBottom
    />*/

    <GiftedChat messages={messages} user={{ _id: 1 }} onSend={handleSend} />
  );
}


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