import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import ChatBubble from './react-chat-bubble/src/components/ChatBubble';

import axios from 'axios';


 
class App extends Component {
	
	
	state = {
    messages: [
      {
        type: 1,
        image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg",
        text: "Hello! Type something!"
      }
    ],
	disabled : false
  };

  handleNewMessage = async (text) =>
  {
	  
	  console.log("!!! handleNewMessage");
	  
    await this.setState({
      messages: this.state.messages.concat([{
        text: text,
        type: 0,
        image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg"
      }])
	  
	  });
	  
	  try {
		  
		  await this.setState({
      messages: this.state.messages.concat([{
        text : "Wait, I am processing...",
        type: 1,
        image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg"
      }]),
	 	  disabled: true
	  });
	  
	  
	 
		let response = await axios.get('http://localhost:3001', {
		  params: {
			phrase: text
		  },
		  responseType: 'text'
		});
		
		
		console.log("!!! RESPONSE");
		console.log(response);
		console.log(response.data);
		
		await this.setState({
      messages: this.state.messages.concat([{
        text : response.data,
        type: 1,
        image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Default_profile_picture_%28male%29_on_Facebook.jpg/240px-Default_profile_picture_%28male%29_on_Facebook.jpg"
      }]),
	 	  disabled: false
	  
	  });
		


	  } catch (error) {
		console.error(error)
	  }
	  
	  
  }
	  
    
	
	componentWillMount(){
    document.body.style.height = "100%";
}

componentWillUnmount(){
    //document.body.style.backgroundColor = null;
}


  render() {
      return <ChatBubble messages={this.state.messages}
        onNewMessage={this.handleNewMessage} disabled={this.state.disabled}/>
  }
}
export default App;