// 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 = {
      name: " ",
      History: [],
      Position: [
            { 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)
      
      this.setState(prevState => ({
        chatHistory: [...this.state.History, msg]
         
      }))
  
      console.log(this.state);
    });
  }
  // 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 Positions= {this.state.Position} parentCallback = {this.handleCallback}/>
        

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

export default App;
