"use strict";

(() => {
  document.querySelector("#perm").addEventListener("click", e => {
    util.getGyroPermission()
    .then((response) => {
      const disp = {
        a: document.querySelector("#disp-a"),
        b: document.querySelector("#disp-b"),
        c: document.querySelector("#disp-c"),
        x: document.querySelector("#disp-x"),
        y: document.querySelector("#disp-y"),
        z: document.querySelector("#disp-z"),
        phi: document.querySelector("#disp-phi"),
        theta: document.querySelector("#disp-theta"),
      };

      window.addEventListener("deviceorientation", e => {
        const alpha = util.deg2rad(e.alpha);
        const beta = util.deg2rad(e.beta);
        const gamma = util.deg2rad(e.gamma);

        const [screenNormal, phi, theta] = util.toPolarCoordinates(alpha, beta, gamma);

        disp.a.innerHTML = `${Math.round(e.alpha)}`;
        disp.b.innerHTML = `${Math.round(e.beta)}`;
        disp.c.innerHTML = `${Math.round(e.gamma)}`;

        disp.x.innerHTML = `${Math.round(100 * screenNormal[0])}`;
        disp.y.innerHTML = `${Math.round(100 * screenNormal[1])}`;
        disp.z.innerHTML = `${Math.round(100 * screenNormal[2])}`;

        disp.phi.innerHTML = `${Math.round(phi / Math.PI * 180)}`;
        disp.theta.innerHTML = `${Math.round(theta / Math.PI * 180)}`;
      });
    });
  }, { once: true });
})();