let width = document.getElementById("viewport").offsetWidth
let height = 300;

let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.getElementById("viewport").appendChild(renderer.domElement);

let scene = new THREE.Scene();

let cubeGeometry = new THREE.CubeGeometry(100, 100/2, 100*1.5);
let cubeGeometry2 = new THREE.CubeGeometry(120, 120/2, 120*1.5);

const color = new THREE.Color("rgb(255, 0, 0)");
let cubeMaterial = new THREE.MeshPhongMaterial({
    color: color,
    opacity: 1,
    transparent: true,
});
const color2 = new THREE.Color("rgb(48,117,255)");
let cubeMaterial2 = new THREE.MeshPhongMaterial({
    color: color2,
    opacity: 0.5,
    transparent: true,
});
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
let cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
scene.add(cube);
scene.add(cube2);

let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 6000);
camera.position.y = 100;
camera.position.z = 240;
camera.lookAt(cube.position);

scene.add(camera);

let skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
let skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
let skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

scene.add(skybox);

const colorl = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(colorl, intensity);

let pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
light.position.set(0, 300, 200);

scene.add(pointLight);

cube.position.x = 0
cube2.position.x = 0

// calibration globals
let manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' )
let calibrationRot = new THREE.Quaternion()
let calPitch = 0
let calRoll = 0
let calYaw = 0

let quaternionOffset = document.getElementById("quaternionOffset")

function renderTCP(x, y, z) {
    let calibration = new THREE.Quaternion().setFromEuler(manCalibration)
    let eul = new THREE.Euler( x, y, z, 'YXZ' );

    cube2.quaternion.setFromEuler(eul).multiply(calibrationRot).multiply(calibration)

    quaternionOffset.innerHTML = `Lage Abweichung: ${(cube2.quaternion.angleTo(cube.quaternion) * 180 / Math.PI).toFixed(2) }°`

    renderer.render(scene, camera);
}

function renderSerial(x, y, z) {
    let eul = new THREE.Euler( x, y, z, 'YXZ' ); // XYZ XZY YZX YXZ ZXY ZYX

    cube.quaternion.setFromEuler(eul)

    renderer.render(scene, camera);
}

renderTCP(0, 0, 0);
renderSerial(0, 0, 0);

let pitchRange = document.getElementById("pitchRange");
let yawRange = document.getElementById("yawRange");
let rollRange = document.getElementById("rollRange");

pitchRange.oninput = () => {
    manCalibration.x = pitchRange.value * Math.PI / 180
}
yawRange.oninput = () => {
    manCalibration.y = yawRange.value * Math.PI / 180
}
rollRange.oninput = () => {
    manCalibration.z = rollRange.value * Math.PI / 180
}

function delCalibration(evt) {
    calibrationRot = new THREE.Quaternion()
    manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' )
    pitchRange.value = 0
    yawRange.value = 0
    rollRange.value = 0
    calRoll = 0
    calPitch = 0
}

let calState = false;
function manualCalibration(evt) {
    let con = document.getElementById("manCalContainer")
    console.log("mancal", con.style.display)
    if (calState === false) {
        delCalibration()
        calState = !calState
        console.log("mancal ON")
        con.style.display = "block"
    } else {
        delCalibration()
        calState = !calState
        console.log("mancal OFF")
        con.style.display = "none"
        manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' )
        pitchRange.value = 0
        yawRange.value = 0
        rollRange.value = 0
    }
}
function calibrate(evt) {
    let serOrientation = cube.quaternion.clone()
    let tcpOrientation = cube2.quaternion.clone().multiply(calibrationRot.clone().invert())
    let diff = tcpOrientation.invert().multiply(serOrientation)

    let old = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' )
    let dif = new THREE.Euler().setFromQuaternion( diff )
    console.log("OLD:","pitch", old.x * 180/Math.PI, "yaw", old.y * 180/Math.PI, "roll", old.z * 180/Math.PI)
    console.log("DIFF:","pitch", dif.x * 180/Math.PI, "yaw", dif.y * 180/Math.PI, "roll", dif.z * 180/Math.PI)
    calPitch = dif.x // * 180/Math.PI
    calYaw = dif.y // * 180/Math.PI
    calRoll = dif.z // * 180/Math.PI
    calibrationRot = diff
}
document.getElementById("deleteCalibration").onclick = delCalibration
document.getElementById("manualCalibration").onclick = manualCalibration
document.getElementById("calibrate").onclick = calibrate


// indicators from https://github.com/sebmatton/jQuery-Flight-Indicators.git

let options = {
    size : 200,				// Sets the size in pixels of the indicator (square)
    roll : 0,				// Roll angle in degrees for an attitude indicator
    pitch : 0,				// Pitch angle in degrees for an attitude indicator
    heading: 0,				// Heading angle in degrees for an heading indicator
    vario: 0,				// Variometer in 1000 feets/min for the variometer indicator
    airspeed: 0,			// Air speed in knots for an air speed indicator
    altitude: 0,			// Altitude in feets for an altimeter indicator
    pressure: 1000,			// Pressure in hPa for an altimeter indicator
    showBox : true,			// Sets if the outer squared box is visible or not (true or false)
    img_directory : 'static/indicators/img/'	// The directory where the images are saved to
}

let headingSer = $.flightIndicator('#headingSer', 'heading', options);
let headingTcp = $.flightIndicator('#headingTcp', 'heading', options);
let attitudeSer = $.flightIndicator('#attitudeSer', 'attitude', options);
let attitudeTcp = $.flightIndicator('#attitudeTcp', 'attitude', options);
let airspeed = $.flightIndicator('#airspeed', 'airspeed', options);
let altimeter = $.flightIndicator('#altimeter', 'altimeter', options);

let airspeedLabel = document.getElementById("airspeedLabel")
let altitudeLabel = document.getElementById("altitudeLabel")

function setIndicatorsTcp(sensordata) {
    let q = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' ) // XYZ XZY YZX YXZ ZXY ZYX

    if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
        attitudeTcp.setPitch(q.x * 180 / Math.PI)
        attitudeTcp.setRoll(q.z * 180 / Math.PI)
    }
    let heading = sensordata.HeadDevice
    if (heading !== 0) {
        headingTcp.setHeading(heading)
    }
}

function setIndicatorsSer(sensordata) {
    if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
        attitudeSer.setPitch(sensordata.Orientation[0])
        attitudeSer.setRoll(sensordata.Orientation[1])
    }
    let heading = sensordata.HeadMotion
    if (heading !== 0) {
        headingSer.setHeading(heading)
    }
    if (sensordata.Speed !== 0) {
        airspeed.setAirSpeed(sensordata.Speed * 3.6)
        airspeedLabel.innerHTML = `Ref. Speed: ${(sensordata.Speed * 3.6).toFixed(1)} km/h`
    }
    if (sensordata.Position[2] !== 0) {
        altimeter.setAltitude((sensordata.Position[2] * 10).toFixed())
        altitudeLabel.innerHTML = `HMSL: ${(sensordata.Position[2]).toFixed(2)} m`
    }
}