import React from "react";


function Tables({persons}) {
  function addEventlistener(name){
    return function(event){
      var personDiv = document.getElementById(name);
      var extend = personDiv.children[0];
      if (extend.style.display === "block") {
          extend.style.display = "none";
      } else {
        extend.style.display = "block";
      }
    }
  }

  const sortedpersons = persons.sort(function(a, b){return b.speed - a.speed});
  
  return (
    <div>
      <div id="online">
        {sortedpersons.filter(person => person.speed>0).map(person => {
          return (
              <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
                  {person.name} ({person.speed} - {person.speed>0 ? "online" : "offline"})
                  <div className='extend'> 
                    <img src='foto.png' alt={person.fullName}/>
                    <p>{person.fullName}</p>
                    <p>Geschwindigkeit: {person.speed}</p>
                    <p>Status: {person.speed>0 ? "online" : "offline"}</p>
                  </div>
              </div>
          );
        })}
      </div> 
      <div id="offline">
        {sortedpersons.filter(person => person.speed<1).map(person => {
          return (
              <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
                  {person.name} ({person.speed>0 ? "online" : "offline"})
                  <div className='extend'> 
                    <img src='foto.png' alt={person.fullName}/>
                    <p>{person.fullName}</p>
                    <p>Status: {person.speed>0 ? "online" : "offline"}</p>
                  </div>
              </div>
          );
        })}
      </div>
      
        
    </div>
  );
}

export default Tables;