class RadioHud{
  constructor(){
    this.DefaultMargin = 1.5;
  }

  SetLocation(value){
    this.location = value;
    if(value.vertical == "left"){
      document.getElementById("radiostates").style.left = 0;
    }
    else if(value.vertical == "middle"){
      document.getElementById("radiostates").style.right = 0;
      document.getElementById("radiostates").style.left = 0;
      document.getElementById("radiostates").style.marginLeft = "auto";
      document.getElementById("radiostates").style.marginRight = "auto";
    }
    else{
      document.getElementById("radiostates").style.right = 0;
    }
  
    if(value.horizontal == "top"){
      document.getElementById("radiostates").style.top = 0;
    }
    else if(value.horizontal == "middle"){
      document.getElementById("radiostates").style.top = 0;
      document.getElementById("radiostates").style.bottom = 0;
      document.getElementById("radiostates").style.marginTop = "auto";
      document.getElementById("radiostates").style.marginBottom = "auto";
    }
    else{
      document.getElementById("radiostates").style.bottom = 0;
    }
  }

  SetExtraMargins(value){	
    if(this.location.vertical != "middle"){
      document.getElementById("radiostates").style.marginLeft = value.left + this.DefaultMargin + "%";
      document.getElementById("radiostates").style.marginRight = value.right + this.DefaultMargin + "%";
    }
    if(this.location.horizontal != "middle"){
      document.getElementById("radiostates").style.marginTop = value.top + this.DefaultMargin + "%";
      document.getElementById("radiostates").style.marginBottom = value.bottom + this.DefaultMargin + "%";
    }
  }

  DrawInfo(radioDetails){
    document.getElementById("radiostates_info").innerHTML = `
      <table class="text-white">
        <tr>
          <td>
            <i class="fa-solid fa-car-on pr-1"></i>
          </td>  
          <td>
            ${radioDetails.vehicle ?? ""}
          </td>  
        </tr>
        <tr>
          <td>
            <i class="fa-solid fa-tower-broadcast pr-1"></i>
          </td>  
          <td>
            ${radioDetails.radio ?? radioDetails.radio_default}
          </td>  
        </tr>
      </table>
  `;
  }
  
  
  DrawButtons(radiostates, current_id, default_state){
    let buttons = ``;

    if(current_id != -1){
      buttons += `<button onclick="SetRadioStateShortcut(-1)" class="btn btn-block btn-sm btn-primary my-1">${default_state}</button>`;
    }

    if(radiostates.length > 0){
      radiostates.forEach(function(element){
        if(current_id != element.id){
          let bgcolor = element.color;
          let FgColor = System.GetFgColorByBgColor(bgcolor);

          buttons += `<button onclick="SetRadioStateShortcut(${element.id})" class="btn btn-block btn-sm my-1" style="background-color:${bgcolor}; color:${FgColor}">${element.short_name}</button>`;
        }
      }); 
    }
    document.getElementById("radiostates_actions").innerHTML = buttons;
  }

}