import React from "react";


function Tables({persons}) {
  function addEventlistener(name){
    return function(event){
      var personDiv = document.getElementById(name);
      var extend = personDiv.lastChild;
      if (extend.style.display === "block") {
          extend.style.display = "none";
      } else {
        extend.style.display = "block";
      }
    }
  }
  
  var currentDate = new Date()

  const sortedpersons = persons.sort(function(a, b){return b.longitude - a.longitude});
  
  return (
    <div>
      <div className="header">
        <p>RACE</p>
        <p>{currentDate.getDate()}.{currentDate.getMonth() + 1}.{currentDate.getFullYear()}</p>
      </div>
      <div id="online">
        {sortedpersons.filter(person => person.online).map((person, index) => {
          return (
              <div key={person.name} className="person" id={person.name} data-status={person.online ? "online" : "offline"} onClick={addEventlistener(person.name)}>
                  {person.longitude}-{person.latitude}-
                  <div className='rank'>{index + 1}</div>
                  <div className='color' style={{backgroundColor: person.color}}>&nbsp;</div>
                  {person.shortName}
                  
                  <div className='speed'>{person.speed}</div>
                 
                  <div className='extend'> 
                    <img src='foto.png' alt={person.fullName}/>
                    <p>{person.fullName}</p>
                    <p>Geschwindigkeit: {person.speed}</p>
                    <p>Status: {person.online ? "online" : "offline"}</p>
                  </div>
              </div>
          );
        })}
      </div> 
      <div id="offline">
        {sortedpersons.filter(person => !person.online).map(person => {
          return (
              <div key={person.name} className="person" id={person.name} data-status={person.online ? "online" : "offline"} onClick={addEventlistener(person.name)}>
                  <div className='color' style={{backgroundColor: person.color}}>&nbsp;</div>
                  {person.shortName}
                  <div className='speed'>OUT</div>
                  <div className='extend'> 
                    <img src='foto.png' alt={person.fullName}/>
                    <p>{person.fullName}</p>
                    <p>Status: {person.online ? "online" : "offline"}</p>
                  </div>
              </div>
          );
        })}
      </div>
      
        
    </div>
  );
}

export default Tables;