const varBraketopcenter = "A:BRAKE PARKING POSITION";
const varGearHandletopcenter = "A:GEAR HANDLE POSITION";
//const varFlapsHandletopcenter = "TRAILING EDGE FLAPS LEFT PERCENT";
const varFlapsHandletopcenter="TRAILING EDGE FLAPS LEFT ANGLE";
const varPlaneHeadingtopcenter = "A:PLANE HEADING DEGREES MAGNETIC";
const varAirspeedtopcenter = "A:AIRSPEED INDICATED";
const varGroundVelocitytopcenter = "A:GROUND VELOCITY";
const varAltitudetopcenter = "A:INDICATED ALTITUDE";
const varAltAboveGroundtopcenter = "A:PLANE ALT ABOVE GROUND";
const varVerticalSpeedtopcenter = "A:VERTICAL SPEED";con
const varNacellesRotationtopcenter = "A:SPOILERS HANDLE POSITION";
//const varNG1topcenter="A:ENG N1 RPM:1";
const varRudTrimtopcenter = "A:RUDDER TRIM PCT";
const varElevTrimtopcenter = "A:Elevator TRIM PCT";
const varWindDirectiontopcenter = "A:AMBIENT WIND DIRECTION";
const varWindVelocitytopcenter = "A:AMBIENT WIND VELOCITY";
const varLocalTimetopcenter = "E:LOCAL TIME";
 
this.store = {
    active: false,
}
this.update_interval=.5;  //Refresh Interval (Seconds)
this.$api.datastore.import(this.store);
 
html_created((el) => {
    this.cellBraketopcenter = document.getElementById("braketopcenter");
    this.cellGearHandletopcenter = document.getElementById("geartopcenter");
    this.cellFlapsHandletopcenter = document.getElementById("flapstopcenter");
    this.cellPlaneHeadingtopcenter = document.getElementById("hdgtopcenter");
    this.cellAirspeedtopcenter = document.getElementById("airspeedtopcenter");
    this.cellGroundVelocitytopcenter = document.getElementById("groundspeedtopcenter");
    this.cellAltitudetopcenter = document.getElementById("alttopcenter");
    this.cellAltAboveGroundtopcenter = document.getElementById("altogtopcenter");
    this.cellVerticalSpeedtopcenter = document.getElementById("vstopcenter");
    this.cellNacellesRotationtopcenter = document.getElementById("nacellesrotationtopcenter");
    this.cellRudTrimtopcenter = document.getElementById("rudtrimtopcenter");
    this.cellElevTrimtopcenter = document.getElementById("elevtrimtopcenter");
    this.cellWindDirectiontopcenter = document.getElementById("winddirtopcenter");
    this.cellWindVelocitytopcenter = document.getElementById("windvelotopcenter");
    
    this.update_elements();
}); 
 
this.update_elements = () => {
    document.getElementById("mytabletopcenter").style.display=(this.store.active ? "block":"none");
    this.stateBraketopcenter = this.$api.variables.get(varBraketopcenter, "Bool");
    this.stateGearHandletopcenter = this.$api.variables.get(varGearHandletopcenter, "Percent Over 100");
    // radians * 180/PI = degrees   radians* 57.3
    this.stateFlapsHandletopcenter = Math.round(this.$api.variables.get(varFlapsHandletopcenter, "Degrees")) .toString().padStart(3, '0');
    //this.stateFlapsHandletopcenter = Math.round(this.$api.variables.get(varFlapsHandletopcenter, "Percent")) %  1000 .toString().padStart(3, '0');
    this.statePlaneHeadingtopcenter = Math.round(this.$api.variables.get(varPlaneHeadingtopcenter, "Degrees")).toString().padStart(3, '0');
    this.stateAirspeedtopcenter = Math.round(this.$api.variables.get(varAirspeedtopcenter, "Knots")).toString().padStart(3, '0');
    this.stateGroundVelocitytopcenter = Math.round(this.$api.variables.get(varGroundVelocitytopcenter, "Knots")).toString().padStart(3, '0');
    this.stateAltitudetopcenter = Math.round(this.$api.variables.get(varAltitudetopcenter, "Feet")).toString();
    this.stateAltAboveGroundtopcenter = Math.round(this.$api.variables.get(varAltAboveGroundtopcenter, "Feet"));
    this.stateVerticalSpeedtopcenter = Math.round(this.$api.variables.get(varVerticalSpeedtopcenter, "Feet per minute"));
    this.stateNacellesRotationtopcenter = Math.round(this.$api.variables.get(varNacellesRotationtopcenter, "Percent")) % 1000 .toString().padStart(3, '0');
    this.stateRudTrimtopcenter = Math.round(this.$api.variables.get(varRudTrimtopcenter, "Percent")) % 1000 .toString().padStart(3, '0');
    this.stateElevTrimtopcenter = Math.round(this.$api.variables.get(varElevTrimtopcenter, "Percent")) % 1000 .toString().padStart(3, '0');
    this.stateWindDirectiontopcenter = Math.round(this.$api.variables.get(varWindDirectiontopcenter, "Degrees")).toString().padStart(3, '0');
    this.stateWindVelocitytopcenter = Math.round(this.$api.variables.get(varWindVelocitytopcenter, "Knots")).toString().padStart(3, '0');
    
    // Uhrzeit umrechnen
let timeInSeconds = Math.round(this.$api.variables.get(varLocalTimetopcenter, "Seconds"));
let date = new Date(null);
date.setSeconds(timeInSeconds);
let hours = date.getUTCHours().toString().padStart(2, '0');
let minutes = date.getUTCMinutes().toString().padStart(2, '0');
this.stateLocalTimetopcenter = `${hours}:${minutes}`;
this.cellLocalTimetopcenter = document.getElementById("localtimetopcenter");
 
// Windrichtung zum Flugzeug berechnen
let relativeWindDirection = this.$api.variables.get(varWindDirectiontopcenter, "Degrees") - this.$api.variables.get(varPlaneHeadingtopcenter, "Degrees");
 
relativeWindDirection = (relativeWindDirection + 360) % 360;
 
//Pfeil justieren 
let rotationDegrees = relativeWindDirection - 180;// Drehung auf den Pfeil anwenden
document.getElementById("windarrowtopcenter").style.transform = `rotate(${rotationDegrees}deg)`;
    
    this.colorNacellesRotationtopcenter = "red";
    this.textBraketopcenter = this.stateBraketopcenter ? "on" : "off";
    this.colorBraketopcenter = this.stateBraketopcenter ? "red" : "lightgreen";
    this.cellBraketopcenter.innerHTML = this.textBraketopcenter;
    this.cellBraketopcenter.style.color = this.colorBraketopcenter;
 
    this.textGearHandletopcenter = "";
    this.colorGearHandletopcenter = "";
    if (this.stateGearHandletopcenter < 0.25) {
      this.textGearHandletopcenter = "up";
      this.colorGearHandletopcenter = "red";
    } else if (this.stateGearHandletopcenter > 0.75) {
      this.textGearHandletopcenter = "down";
      this.colorGearHandletopcenter = "lightgreen";
    } else {
      this.textGearHandletopcenter = `${Math.round(this.stateGearHandle * 100)}%`;
      this.colorGearHandletopcenter = "black";
    }
    this.cellGearHandletopcenter.innerHTML = this.textGearHandletopcenter;
    this.cellGearHandletopcenter.style.color = this.colorGearHandletopcenter;
    this.cellFlapsHandletopcenter.innerHTML = this.stateFlapsHandletopcenter;
    this.cellPlaneHeadingtopcenter.innerHTML = this.statePlaneHeadingtopcenter;
    this.cellAirspeedtopcenter.innerHTML = this.stateAirspeedtopcenter;
    this.cellGroundVelocitytopcenter.innerHTML = this.stateGroundVelocitytopcenter;
    this.cellAltitudetopcenter.innerHTML = this.stateAltitudetopcenter;
    this.cellAltAboveGroundtopcenter.innerHTML = this.stateAltAboveGroundtopcenter;
    this.cellVerticalSpeedtopcenter.innerHTML = this.stateVerticalSpeedtopcenter;
    this.cellNacellesRotationtopcenter.innerHTML = this.stateNacellesRotationtopcenter;
    this.cellRudTrimtopcenter.innerHTML = this.stateRudTrimtopcenter;
    this.cellElevTrimtopcenter.innerHTML = this.stateElevTrimtopcenter;
    this.cellWindDirectiontopcenter.innerHTML = this.stateWindDirectiontopcenter;
    this.cellWindVelocitytopcenter.innerHTML = this.stateWindVelocitytopcenter;
    this.cellLocalTimetopcenter.innerHTML = this.stateLocalTimetopcenter;
 this.cellNacellesRotationtopcenter.style.color = this.colorNacellesRotationtopcenter;
}
 
this.update_counter=0;  
loop_30hz(()=>{
    if(this.store.active && (this.update_counter >= (this.update_interval*30))){
        this.update_counter=0;
        this.update_elements();
    }
    this.update_counter++;
});
 
run(() => {
    this.store.active=!this.store.active;
    this.$api.datastore.export(this.store);
    this.update_elements();
    return 2000;
});
 
style(() => {
    return this.store.active ? 'active' : 'inactive';
});