import React from 'react';
import './controls.css'
// import { sendMsg } from '../api';
import  Tracklist from './Tracklist'
import EntityControl from './EntityControl';
import round from '../Utils';
// 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+"/");

// const round = (n, dp) => {
//   const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
//   return Math.round(n * h) / h
// }

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, SelectedEntity)
    {
      if(SelectedEntity !== undefined) 
      {
        var tmp = {};
        // tmp.NewPos= new Array(0,0);
        // console.log(tmp);

        Entities.map((val) => {
          if(val.id === SelectedEntity.EntityID)
          {
             tmp = val
            // tmp = JSON.parse(JSON.stringify(val));
            // console.log(tmp);
            val.dragged = SelectedEntity.dragged;
            if(SelectedEntity.dragged === undefined)
            {
              val.dragged = false;
            }
          
              // console.log(SelectedEntity);
              
            //   if(SelectedEntity.NewPos !== undefined)
            //   {
            //   // Object.assign(tmp, {NewPos: [{},{}]});
            //   Object.assign(val, {NewPos: [{},{}]});

            //   // tmp.OldPos = val.Position;
            //   // Object.assign(tmp, {NewPos: [round(SelectedEntity.NewPos[0],3),0]});
            //   // val.NewPos = SelectedEntity.NewPos;
            //   val.NewPos[0] = round(SelectedEntity.NewPos[0],3);
            //   val.NewPos[1] = round(SelectedEntity.NewPos[1],3);

            //   // tmp.NewPos[0] = round(SelectedEntity.NewPos[0],3);
            //   // tmp.NewPos[1] = round(SelectedEntity.NewPos[1],3);

            // }

            // tmp.NewPos = SelectedEntity.NewPos;
          }
          return tmp;
        })
        // console.log(tmp);
        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 Functions = {this.props.Functions} Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} EntityOnFocus= {this.props.EntityOnFocus} PositionCliecked =  {this.props.PositionClicked}/>        

            </div>
          </div>
        );
      }

}

export default Controls;