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 config = {
//   // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
//   apiUrl: "192.168.3.13",
//   apiProt: 30747
// }


// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");



class Controls extends React.Component
{

state = {
  EntityOnFocus: undefined,
}

  componentDidMount()
  {
    // client.onopen = () => {
    //   console.log(" Control 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}>update</button>                
                  <EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)}/>        

            </div>
          </div>
        );
      }

}

export default Controls;