import React from 'react';
import './controls.css'
// import { sendMsg } from '../api';
import  Tracklist from './Tracklist'
import EntityControl from './EntityControl';
import {w3cwebsocket as W3CWebSocket} from "websocket"

const client = new W3CWebSocket("ws://localhost:8008/");

class Controls extends React.Component
{

state = {
  EntityOnFocus: this.props.EntityOnFocus
}

  componentDidMount()
  {
    client.onopen = () => {
      console.log("Websocket Client Connected");
    };

    client.onmessage = (message) => {
      const dataFromServer = JSON.parse(message.data);
      console.log('reply', dataFromServer);
    }
  }

  
  render() {
   function getEntityFromID(Entities, SelectedKey)
    {
      let tmp = [];
      Entities.map((val,index) => {
      if(val.id === SelectedKey)
      {
        tmp = val
      }
     
    })
    return tmp;
    }

    console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));
        return (
          <div className="controls">
            <Tracklist entities= {this.props.Entities} />
          <br />
            <div>
              <button onClick={this.props.updateEntities}> click me!</button>
              <EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} />
            </div>
          </div>
        );
      }

}

export default Controls;
