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';
});