var rotationOK = false;
var experienceLoaded = false;
var experienceOKToStart = false;
var experienceStarted = false;

var isMuted = false;
var isLowPowerMode = false;

var gameCamera;
var tapToPlacePlane, tapToPlaceAim;
var hasTappedToPlace = false;
const tapToPlaceRaycaster = new THREE.Raycaster();
var rayOrigin = new THREE.Vector2(0, 0);
var cursorLocation = new THREE.Vector3(0, 0, 0);
var ground;
var setTimeouttapToPlaceMove;
var positionCursor;
var randomOneToThree;
var randomAppearsTargets;
var finalFrameIsOn = false;
var caughtBall = false;
var newBulletLive = false;

var videoPlaying = false;
var timeout = 60000;
var finalTimer, tapToPlaceTimer;
var timerAppear;
var currentClass = "";
/*
var sfx_bgMusic = new Howl({
  src: ["./assets/sfx/Coregeo_Pink_Lady_Nature_30sec.mp3"],
  autoplay: false,
  loop: true,
});
*/
function errorLowPowerMode() {
  console.log("errorLowPowerMode");
  isLowPowerMode = true;
  $("#iyp_loading").css("display", "block");
  $("#low_power_warning").css("display", "block");
  $("#loading_logo").css("display", "none");
}

window.addEventListener("pageshow", function (event) {
  if (event.persisted) {
    window.location.reload();
  }
});

$(document).ready(function () {
  AFRAME.registerComponent("alfatest", {
    dependencies: ["material"],

    init: function () {
      var material = this.el.getObject3D("mesh").material;
      material.alphaTest = 0.5;
      material.needsUpdate = true;
    },
  });

  AFRAME.registerComponent("goto", {
    init: function () {
      this.el.addEventListener("click", (e) => {
        clickedElement(this.el.id);
      });
    },
  });
  document.querySelector("#main_scene").renderer.gammaInput = true;
  document.querySelector("#main_scene").renderer.gammaOutput = true;

  ground = document.querySelector("#ground");
  tapToPlacePlane = document.querySelector("#flat_surface");
  tapToPlaceAim = document.querySelector("#aim");
  tapToPlaceMove();

  $("#intro_button_lets_go").click(showTapToStart);

  $("#button_tap_to_place").click(function () {
    $("#button_tap_to_place").css("display", "none");
    if (!experienceStarted) startExperience();
    document.querySelector("#main_scene").emit("recenter");

    $("#flat_surface").attr("visible", "false");
    clearTimeout(tapToPlaceTimer);
  });

  $("#btnClosePolaroid").click(function () {
    $("#polaroidShare").css("display", "none");
    $("#btnClosePolaroid").css("display", "none");
    $("#btn_takePhoto").css("display", "block");
  });

  const shareData = {
    title: "Pink Lady Apples AR Experience",
    text: "The experience link",
    url: window.location.href,
  };

  $("#button_2_share").click(async () => {
    try {
      await navigator.share(shareData);
      resultPara.textContent = "MDN shared successfully";
    } catch (err) {
      resultPara.textContent = "Error: " + err;
    }
  });

  $("#button_1_share").click(async () => {
    try {
      await navigator.share(shareData);
      resultPara.textContent = "MDN shared successfully";
    } catch (err) {
      resultPara.textContent = "Error: " + err;
    }
  });
  // Get Page Elements

  var handleCameraStatusChange = function handleCameraStatusChange(event) {
    console.log("camera status change", event.detail.status);
    if (event.detail.status == "hasStream") {
      if (!isLowPowerMode) {
        $("#iyp_loading").css("display", "none");
        rotationOK = true;
        intro();
      } else {
        errorLowPowerMode();
      }
    }
  };

  document
    .querySelector("#main_scene")
    .addEventListener("camerastatuschange", handleCameraStatusChange);

  // Click Take Photo Handler
  $("#btn_takePhoto").click(function () {
    if (experienceStarted) {
      console.log("clicked take photo");
      $("#btn_takePhoto").css("display", "none");
      document.querySelector("#main_scene").emit("screenshotrequest");
    }
  });

  $("#find_out_more").click(function () {
    window.location.href = "https://vm.tiktok.com/ZM8xoCVKu/";
  });

  $("#button_win_apples").click(function () {
    window.location.href =
      "https://www.pinkladyapples.co.uk/competitions/australian-orchards?utm_source=AR&utm_medium=Click&utm_campaign=MandS&utm_term=Win_Apples";
  });

  $("#btn_soundToggle").click(function () {
    isMuted = !isMuted;

    if (isMuted == true) {
      //sfx_bgMusic.stop();
      document.getElementById("character1").muted = true;
      $("#btn_soundToggle").removeClass("on");
      $("#btn_soundToggle").addClass("off");
    } else {
      //sfx_bgMusic.play();
      document.getElementById("character1").muted = false;
      $("#btn_soundToggle").addClass("on");
      $("#btn_soundToggle").removeClass("off");
    }
  });

  $("#btn_restart").click(function () {
    location.reload();
  });

  $("#btn_recenter").click(function () {
    console.log("Recenter");
    let scene = document.querySelector("#main_scene");
    scene.emit("recenter");
  });

  $("#touch_points_close").click(function () {
    $("#touch_points").css("display", "none");
    clearTimeout(timerAppear);
  });

  $("#wine_apples_2").click(function () {
    finalFrame();
    clearTimeout(finalTimer);
  });

  document
    .querySelector("#main_scene")
    .addEventListener("screenshotready", (e) => {
      // Hide the flash
      console.log("screenshotready");
      // container.classList.remove('flash')
      // If an error occurs while trying to take the screenshot, e.detail will be empty.
      // We could either retry or return control to the user
      if (!e.detail) {
        return;
      }

      //Polaroid
      var strMime = "image/jpeg";
      var imgData = "data:image/jpeg;base64," + e.detail;

      var canvasImg = document.createElement("img");
      document.body.appendChild(canvasImg);
      canvasImg.onload = function () {
        var img_game_button_press_overlay = new Image(); // Create new img element
        img_game_button_press_overlay.addEventListener(
          "load",
          function () {
            var img2 = new Image(); // Create new img element
            img2.addEventListener(
              "load",
              function () {
                var img_game_left_overlay = new Image(); // Create new img element
                img_game_left_overlay.addEventListener(
                  "load",
                  function () {
                    var img_img_logo = new Image(); // Create new img element
                    img_img_logo.addEventListener(
                      "load",
                      function () {
                        var img_game_count_down_bg_opverlay = new Image(); // Create new img element
                        img_game_count_down_bg_opverlay.addEventListener(
                          "load",
                          function () {
                            var img_game_right_overlay = new Image(); // Create new img element
                            img_game_right_overlay.addEventListener(
                              "load",
                              function () {
                                var canvas = $("#polaroidHolder")[0];
                                var ctx = canvas.getContext("2d");
                                ctx.canvas.width = canvasImg.width;
                                ctx.canvas.height = canvasImg.height;
                                var canvasWidth = canvas.width;
                                var canvasHeight = canvas.height;

                                ctx.fillStyle = "#ffffff";
                                ctx.fillRect(0, 0, canvasWidth, canvasHeight);

                                ctx.drawImage(
                                  canvasImg,
                                  20,
                                  20,
                                  canvasWidth - 40,
                                  canvasHeight - 40
                                );
                                /*
                                ctx.fillStyle = "#ffffff";
                                ctx.fillRect(
                                  0,
                                  (canvasHeight/10)*9,
                                  canvasWidth,
                                  canvasHeight/10
                                );
                                */

                                ctx.drawImage(
                                  img2,
                                  20,
                                  canvasHeight - canvasWidth * 0.3,
                                  canvasWidth - 40,
                                  (canvasWidth - 40) * 0.457
                                );

                                ctx.drawImage(
                                  img_game_button_press_overlay,
                                  canvasWidth / 4,
                                  canvasHeight - canvasWidth * 0.7,
                                  canvasWidth / 2,
                                  canvasWidth / 2
                                );

                                ctx.drawImage(
                                  img_game_count_down_bg_opverlay,
                                  20,
                                  canvasHeight - canvasWidth * 0.55,
                                  canvasWidth / 4,
                                  canvasWidth / 4
                                );

                                ctx.drawImage(
                                  img_game_left_overlay,
                                  20,
                                  canvasHeight - canvasWidth * 0.55,
                                  canvasWidth / 4,
                                  canvasWidth / 4
                                );

                                ctx.drawImage(
                                  img_img_logo,
                                  canvasWidth * 0.2,
                                  20,
                                  canvasWidth * 0.6,
                                  canvasWidth * 0.6
                                );
                                /*
                                ctx.fillStyle = "red";
                                
                                ctx.font = canvasWidth * 0.1 + "px Arial";
                                ctx.textAlign = "center";
                                ctx.fillText(
                                  scoreSrcText + " PTS",
                                  canvasWidth * 0.5,
                                  canvasHeight - canvasWidth * 0.7
                                );
                                */
                                ctx.drawImage(
                                  img_game_right_overlay,
                                  3 * (canvasWidth / 4) - 20,
                                  canvasHeight - canvasWidth * 0.55,
                                  canvasWidth / 4,
                                  canvasWidth / 4
                                );
                                /*  
                                ctx.fillStyle = "white";
                                ctx.font = canvasWidth * 0.09 + "px Arial";
                                ctx.textAlign = "center";
                                ctx.fillText(
                                  scoreSrcText,
                                  canvasWidth * 0.845,
                                  canvasHeight - canvasWidth * 0.35
                                );
                                */
                                var myImage = canvas.toDataURL("image/png");
                                var imageElement =
                                  document.getElementById("polaroidImage");
                                imageElement.src = myImage;
                                if (finalFrameIsOn) {
                                  $("#polaroidShare").css("display", "block");
                                  $("#hold_to_save").css("display", "block");
                                  $("#btnClosePolaroid").css("display", "none");
                                } else {
                                  $("#polaroidShare").css("display", "block");
                                  $("#hold_to_save").css("display", "block");
                                  $("#btnClosePolaroid").css(
                                    "display",
                                    "block"
                                  );
                                }
                              },
                              false
                            );
                            img_game_right_overlay.src =
                              document.getElementById("empty").src;
                          },
                          false
                        );
                        img_game_count_down_bg_opverlay.src =
                          document.getElementById("empty").src;
                      },
                      false
                    );
                    img_img_logo.src = document.getElementById("img_logo").src;
                  },
                  false
                );
                img_game_left_overlay.src =
                  document.getElementById("empty").src;
              },
              false
            );
            img2.src = document.getElementById("empty").src; // Set source path
          },
          false
        );
        img_game_button_press_overlay.src =
          document.getElementById("empty").src;
      };
      canvasImg.src = imgData.replace(strMime, "image/octet-stream");
      //Polaroid

      // Tell the restart-camera script to start watching for issues
      window.dispatchEvent(new Event("ensurecamerastart"));
    });
});

function intro() {
  $("#intro").css("display", "block");
  $("#top_bar").css("display", "block");
  $("#intro_button_lets_go").css("display", "block");
}

function showTapToStart() {
  $("#intro").css("display", "none");
  $("#intro_button_lets_go").css("display", "none");
  $("#button_tap_to_place").css("display", "block");
}

function startExperience() {
  console.log("Go!");
  //document.getElementById("myRange").oninput();
  if (isLowPowerMode) return;

  let scene = document.querySelector("#main_scene");
  scene.emit("recenter");

  $("#btn_takePhoto").css("display", "block");
  $("#button_1_share").css("display", "block");
  experienceStarted = true;
  showVideo();
  //startPlayGame();
  //sfx_bgMusic.play();
  finalTimer = setTimeout(() => {
    finalFrame();
  }, timeout);
}

function finalFrame() {
  finalFrameIsOn = true;
  $("#find_out_more").css("display", "block");
  $("#button_2_share").css("display", "block");
  //$("#button_win_apples").css("display", "block");
  $("#btn_takePhoto").css("display", "none");
  $("#wine_apples_2").css("display", "none");

  $("#button_1_share").css("display", "none");
  $("#outro").css("display", "block");
  //$("#outro_social").css("display", "block");
  $("#btn_restart").css("display", "block");

  $("#touch_points").css("display", "none");
  //sfx_bgMusic.stop();
  hide360();
}

function showPolaroid() {
  var canvas = $("#polaroidHolder")[0];
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "#eeeeee";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#ffffff";
  ctx.fillRect(20, 20, canvas.width - 40, canvas.width - 20);

  var myImage = canvas.toDataURL("image/png");
  var imageElement = document.getElementById("polaroidImage");
  imageElement.src = myImage;
}

function tapToPlaceMove() {
  gameCamera = document.querySelector("#camera").getObject3D("camera");

  tapToPlaceTimer = setTimeout(tapToPlaceMove, 25);

  if (!gameCamera) return;
  if (!ground) return;
  //if (experienceStarted) return;

  tapToPlaceRaycaster.setFromCamera(rayOrigin, gameCamera);

  const intersects = tapToPlaceRaycaster.intersectObject(ground.object3D, true);

  if (intersects.length > 0) {
    const intersect = intersects[0];
    cursorLocation = intersect.point;
    // console.log('intersect at: ' + cursorLocation);
  } else {
    // console.log('no intersect');
  }
  // tapToPlacePlane.object3D.position.y = 0.15
  tapToPlacePlane.object3D.position.lerp(cursorLocation, 0.4);
  tapToPlacePlane.object3D.rotation.z = gameCamera.rotation.y;
}

function showVideo() {
  document.getElementById("character1").play();
  document.getElementById("character1").muted = false;

  document.getElementById("character1").addEventListener(
    "ended",
    () => {
      console.log("video_ended");
      finalFrame();
    },
    false
  );

  setTimeout(() => {
    document.querySelector("#videoCharacter1").setAttribute("visible", "true");

    

    setTimeout(() => {
      document.getElementById("character2").play();
      setTimeout(() => {
        document
        .querySelector("#videoCharacter2")
        .setAttribute("visible", "true");
      }, 500);

    }, 50000);
  }, 850);
}



function clickedElement(elId) {
  if (elId == "select_sun") {
    console.log("select_sun");
    $("#touch_points").removeClass(currentClass);
    $("#touch_points").css("display", "block");

    currentClass = "class_sun";
    $("#touch_points").addClass(currentClass);
    timerAppear = setTimeout(() => {
      $("#touch_points_close").click();
    }, 5000);
  }
  if (elId == "select_earth") {
    console.log("select_earth");
    $("#touch_points").removeClass(currentClass);
    $("#touch_points").css("display", "block");

    currentClass = "class_earth";
    $("#touch_points").addClass(currentClass);
    timerAppear = setTimeout(() => {
      $("#touch_points_close").click();
    }, 5000);
  }
  if (elId == "select_apple") {
    console.log("select_apple");
    $("#touch_points").removeClass(currentClass);
    $("#touch_points").css("display", "block");

    currentClass = "class_apples";
    $("#touch_points").addClass(currentClass);
    timerAppear = setTimeout(() => {
      $("#touch_points_close").click();
    }, 5000);
  }
  if (elId == "select_kangaroo") {
    console.log("select_kangaroo");
    $("#touch_points").removeClass(currentClass);
    $("#touch_points").css("display", "block");

    currentClass = "class_kangaroo";
    $("#touch_points").addClass(currentClass);
    timerAppear = setTimeout(() => {
      $("#touch_points_close").click();
    }, 5000);
  }
}