// App.js
import React, { Component } from "react";
import "./App.css";
import { connect, sendMsg } from "./components/api/index";
import Header from './components/Header';
import Controls from "./components/control/controls";
// import ChatHistory from "./components/ChatHistory/ChatHistory.jsx";

import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";



class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Entities: [
            // { id: 1, name: "Apple", position: [51.505, -0.10],Type: "Friend" },
            // { id: 2, name: "Oranges", position: [51.505, -0.11],Type: "Hostile"},
            // { id: 3, name: "Grapes", position: [51.505, -0.12],Type: "Friend"}
          ],
    
        
    }
  }
  componentDidMount() {
    



      connect((msg) => {
          console.log("New Message")
          console.log(msg.data)
          var jsonMSG;
          try {
            jsonMSG = JSON.parse(msg.data);
          } catch (error) {
            console.log(error);
          }
          if(jsonMSG["Type"] == "COP"){
            var Entities =  Array.from(jsonMSG["Entities"])
            if(Array.isArray(Entities))
            {
              this.setState({
                Entities:Entities
              });
            }
          }
          // this.state.Entities = jsonMSG
        	// var jsonmsg = JSON.parse(msg);
      this.setState(prevState => ({
        // chatHistory: [...this.state.History, msg]
        // chatHistory: [...this.state.History, msg]
         
      }))
  
      console.log(this.state.Entities);
    });
    

  }
  // send() {
    //   console.log("hello");
    //   // sendMsg("hello world");
    // }

    handleCallback = (ChildData) => {
      this.setState({name: ChildData})
      console.log(ChildData);
    }
    
    render() {
    const {name} = this.state;
    return (
      <div className="App">
        <Header />
        <Controls />
        {/* <ChatHistory History={this.state.History} /> */}
        <div>
        {name}

        </div>
        <OpenSeaMap Entities= {this.state.Entities} parentCallback = {this.handleCallback}/>
        

        <button onClick={this.send}>Hit</button>
      
      </div>
    );
  }
}

export default App;
