import React, { Component } from 'react';
import fire from './config/Fire';

import './App.css';


class Conversations extends Component{
    constructor(props){
        super(props);
        this.state = {
            thisUser: props.username,
            hasConversationOpen: false,
            otherUser : "",
            conversationID : ""
        }
    }

    loadConversations = () =>{
        let collectionRef = fire.firestore().collection('messages');
        collectionRef.get().then(function(collection){
            collection.forEach(function(doc){
                let user1 = doc.data().user1;
                let user2 = doc.data().user2;
                console.log(doc.id, " => 1:", doc.data().user1, " 2:", doc.data().user2);
                if(user1 == this.state.thisUser || user2 == this.state.thisUser){
                    console.log("Found message between ", user1, " and ", user2);
                    //TODO add this conversation to innerHTML
                }

            });

        }).catch((error)=>{
            let errorMessage = error;
            console.log("error retrieving messages collection: ", errorMessage);
        });
    }

    pickConversation = (other, conversationID) => {
        this.setState({thisUser: this.state.thisUser, hasConversationOpen: true, otherUser: other, conversationID:conversationID});
    }

    newConversation = (e) => {
        e.preventDefault();
        //check if user already has conversation with this person
        let foundConvo = false;
        let messagesCollectionRef = fire.firestore().collection('messages');
        let x = this;
        messagesCollectionRef.get().then(function(collection){
            collection.forEach(function(doc){
                let user1 = doc.data().user1;
                let user2 = doc.data().user2;
                if((user1 == x.state.thisUser && user2 == x.state.otherUser) ||
                    (user2 == x.state.thisUser && user1 == x.state.otherUser)){
                        //conversation exists
                        foundConvo = true;
                        x.pickConversation(x.state.otherUser, doc.id);
                    }
            });
        });
        if(!foundConvo){
        //check if user exists
            let userCollectionRef = fire.firestore().collection('users');
            let x = this;
            userCollectionRef.get().then(function(collection){
                let userExists = false;

                collection.forEach(function(doc){
                    let user = doc.data().username;
                    if(user == x.state.otherUser){
                        userExists = true;
                    }
                });
                if(!userExists){
                    //TODO write error message or something
                    alert("user not exist");
                }
                else{
                    //create conversation
                    fire.firestore().collection("messages").doc().set({
                        messages: {}, user1: x.state.thisUser, user2: x.state.otherUser
                    }).then(function(){
                        console.log("Successfully made conversation between ", x.state.thisUser, " and ", x.state.otherUser);
                        //join conversation
                        x.loadConversations();
                        x.pickConversation(x.state.otherUser);
                    }).catch((error)=>{
                        console.log("error while creating conversation: ",error);
                    });
                }

            }).catch((error)=>{
                let errorMessage = error;
                console.log("error retrieving users collection: ",errorMessage);
            });
        }

    }

    handleChange = (e) => {
        this.setState({[e.target.name]: e.target.value});
    }

    render(){
        return(
            <div>
                {this.loadConversations}
                <ul id = "conversations">

                </ul>
                <form>
                    <label>New Conversation with:</label>
                    <input type = "text" id = "requestedUser" name="otherUser"value = {this.state.otherUser} onChange = {this.handleChange}/>
                    <button type = "submit" onClick = {this.newConversation}>Begin</button>
                </form>
                {this.state.hasConversationOpen?(<Messages username={this.state.thisUser} otherUser={this.state.otherUser} conversationID={this.state.conversationID}/>):(null)}
            </div>
        )
    }
}

class Messages extends Component{
    constructor(props){
        super(props);
        this.state = {
            msg: "",
            otherUser: props.otherUser,
            thisUser: props.username,
            conversationID: props.conversationID,
            messages: {}
        }
    }

    loadMessages = () =>{
        let conversationDocRef = fire.firestore().collection("messages").doc(this.state.conversationID);
        let x = this;
        conversationDocRef.get().then(function(doc){
            let messages = doc.data().messages;
            x.setState({messages:messages});
            for(let i=0; i<messages.length; i=i+2){
                let author = messages[i];
                let msg = messages[i+1];
                //TODO innerHTML
            }
        }).catch((error)=>{
            console.log("messages loading error: ", error);
        })
    }

    writeMessage = (e) =>{
        e.preventDefault();
        let conversationDocRef = fire.firestore().collection("messages").doc(this.state.conversationID);
        let x = this;
        let messagesLength = x.state.messages.length;
        console.log(messagesLength);
        if(messagesLength<0 || messagesLength==null){
            messagesLength=0;
        }
        let messages = this.state.messages;
        console.log(messages);
        messages[messagesLength] = x.state.thisUser;
        messages[messagesLength+1] = x.state.msg;
        console.log(messages);
        conversationDocRef.update({
            messages:messages
        }).then(function(doc){
            x.loadMessages();
        });

    }

    handleChange = (e) =>{
        this.setState({[e.target.name]: e.target.value});
    }

    render(){
        return(

            <div>
                {this.loadMessages()}
                <h1>Conversation with {this.state.otherUser}</h1>
                <p id = "messages"></p>
                <form>
                    <label>Type a message:
                        <input type = "text" name = "msg" id= "msg" value = {this.state.msg} onChange = {this.handleChange}/>
                        <button type = "submit" onClick = {this.writeMessage}>Send</button>
                    </label>

                </form>


            </div>

        )
    }



}

export default Conversations;