import React, { Component } from 'react';


class TablesClass extends Component {
    constructor(props){
        super(props);
        
        this.state = {
            persons: [
              {name: "Martin", fullName: "Martin Venzl", status: "online", speed: 2},
              {name: "Simon", fullName: "Simon Ellinger", status: "online", speed: 4},
              {name: "Lukas", fullName: "Lukas Wagner", status: "online", speed: 1},
              {name: "Bernie", fullName: "Bernadette Hammerle", status: "online", speed: 3},
              
              {name: "tester1", fullName: "Testperson 1", status: "online", speed: 0},
              {name: "tester2", fullName: "Testperson 2", status: "offline", speed: 6}
            ]
        }
        
        this.sortDivs = this.sortDivs.bind(this)
    }
    
    // put every person in the right div (online or offline)
    pushPersonToDiv(personDiv){
      if (personDiv.dataset.status==="online"){
        document.getElementById("online").appendChild(personDiv);
      }else{
        document.getElementById("offline").appendChild(personDiv);
      }
    }
    
    // update the content inside the div of one person
    updateDivContent(person){
      var id = person.name;
      var div = document.getElementById(id);
      div.dataset.status = person.status;
      if (person.status==="online") {
        div.innerHTML = person.name +
        " (" + person.speed + " - " + person.status + ")" +
        "<div class='extend'>" +
        "<img src='foto.png'/>" +
        "<p>" + person.fullName + "</p>" +
        "<p>Geschwindigkeit: " + person.speed + "</p>" +
        "<p>Status: " + person.status + "</p>" +
        "</div>";
      }else{
        div.innerHTML = person.name +
        " (" + person.status + ")" +
        "<div class='extend'>" +
        "<img src='foto.png'/>" +
        "<p>" + person.fullName + "</p>" +
        "<p>Geschwindigkeit: " + person.speed + "</p>" +
        "<p>Status: " + person.status + "</p>" +
        "</div>";
      }
      this.pushPersonToDiv(div);
    }
      
    // create div with event listener for every person in array
    createDivs(person){
        var div = document.createElement('div');
        div.className = "person";
        div.id = person.name;
        div.setAttribute("data-status", person.status);
        
        this.pushPersonToDiv(div);
        this.updateDivContent(person);
        
        // add event listener to extend every person div
        div.addEventListener("click", function(event) {
          this.classList.toggle("active");
          var targetElement = event.target || event.srcElement;
          var extend = targetElement.children[0];
          if (extend.style.display === "block") {
              extend.style.display = "none";
          } else {
            extend.style.display = "block";
          }
        });
    
    }
      
    
    // comparing the speed
    sortDivs(){
        this.state.persons.sort(function(a, b){return b.speed - a.speed});
        this.state.persons.map((person) => (this.updateDivContent(person)));
    }

    // render every person and a button in a wrapper
    render(){
        return (
            <div className="tableWrapper">
                {this.state.persons.map((person) => (
                    this.createDivs(person)
                ))}
                <button onClick={this.sortDivs}>Sort</button>
            </div>
        );
    }
}

export default TablesClass;