// Debug
const gui = new dat.GUI();

//timeline for animation
let tl = gsap.timeline();
gsap.registerPlugin(ScrollTrigger);

// Canvas
const canvas = document.querySelector("canvas.webgl");

let donut;

// Scene
const scene = new THREE.Scene();

//gltf loader
const gtlfLoader = new THREE.GLTFLoader();

gtlfLoader.load(
  "https://raw.githubusercontent.com/Samruddha17/bliss-ca/main/models/Donut1.gltf",
  (gltf) => {
    donut = gltf.scene.children[0];
    Object.defineProperty(donut, "scale", {
      writable: true,
      configurable: true
    });

    gltf.scene.scale.set(7, 7, 7);
    gltf.scene.position.set(-3, 1, 1);
    gltf.scene.rotation.set(0, 0, 8);
    scene.add(gltf.scene);

    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);

    const donutSetting = gui.addFolder("donut");
    donutSetting.add(gltf.scene.rotation, "x").min(-10).max(10).step(0.1);
    donutSetting.add(gltf.scene.rotation, "y").min(-10).max(10).step(0.1);
    donutSetting.add(gltf.scene.rotation, "z").min(-10).max(10).step(0.1);
    donutSetting.add(gltf.scene.position, "x").min(-10).max(10).step(0.1);
    donutSetting.add(gltf.scene.position, "y").min(-10).max(10).step(0.1);
    donutSetting.add(gltf.scene.position, "z").min(-10).max(10).step(0.1);

    tl.to(gltf.scene.rotation, { z: 0, x: 0, duration: 4 })
      .to(gltf.scene.position, { x: 1, duration: 4 }, "<")
      .to(gltf.scene.rotation, { y: 5.9, duration: 5 }, 3)
      .to(gltf.scene.scale, { x: 11, y: 11, z: 11, duration: 5 }, "<");
  }
);

const myClick = () => {
  tl.play();
};

// Lights
const pointLight2 = new THREE.PointLight("white", 1);
pointLight2.position.set(60, 3, 4);
pointLight2.intensity = 1.4;
scene.add(pointLight2);

// //adding gui to this
const light2 = gui.addFolder("pointLight2");
light2.add(pointLight2.position, "x").min(-60).max(60).step(0.1);
light2.add(pointLight2.position, "y").min(-60).max(60).step(0.1);
light2.add(pointLight2.position, "z").min(-60).max(60).step(0.1);
light2.add(pointLight2, "intensity").min(0).max(10).step(0.01);

// const pointLight2Helper = new THREE.PointLightHelper(pointLight2, 1);
// scene.add(pointLight2Helper);

const pointLight1 = new THREE.PointLight("white", 1);
pointLight1.position.set(-2, -3, 3.2);
pointLight1.intensity = 1.2;
scene.add(pointLight1);

const light1 = gui.addFolder("pointLight1");
light1.add(pointLight1.position, "x").min(-60).max(60).step(0.1);
light1.add(pointLight1.position, "y").min(-60).max(60).step(0.1);
light1.add(pointLight1.position, "z").min(-60).max(60).step(0.1);
light1.add(pointLight1, "intensity").min(0).max(10).step(0.01);

// const pointLight1Helper = new THREE.PointLightHelper(pointLight1, 1);
// scene.add(pointLight1Helper);

const pointLight3 = new THREE.PointLight("white", 1);
pointLight3.position.set(-3, -1, -8);
pointLight3.intensity = 1.2;
scene.add(pointLight3);

const light3 = gui.addFolder("pointLight3");
light3.add(pointLight3.position, "x").min(-10).max(10).step(0.1);
light3.add(pointLight3.position, "y").min(-10).max(10).step(0.1);
light3.add(pointLight3.position, "z").min(-10).max(10).step(0.1);
light3.add(pointLight3, "intensity").min(0).max(10).step(0.01);

// const pointLight3Helper = new THREE.PointLightHelper(pointLight3, 1);
// scene.add(pointLight3Helper);

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  25,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 5;
scene.add(camera);

//  const controls = new OrbitControls(camera, canvas)
//  controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  alpha: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * Animate
 */

// document.removeEventListener("mousemove", onDonutMouseMove);

// setTimeout(() => {
//   document.addEventListener("mousemove", onDonutMouseMove);
// }, 9000);

let mouseX = 0;
let mouseY = 0;
let targetX = 0;
let targetY = 0;
const windowX = window.innerWidth / 2;
const windowY = window.innerHeight / 2;

function onDonutMouseMove(event) {
  mouseX = event.clientX - windowX;
  mouseY = event.clientY - windowY;

  targetX = mouseX * 0.001;
  targetY = mouseY * 0.001;

  donut.rotation.x += -0.001 * (targetX - donut.rotation.x);

  renderer.render(scene, camera);
}

document.addEventListener("scroll", donutScale);

function donutScale() {
  gsap.to(donut.scale, {
    x: 1,
    y: 1,
    z: 1,
    duration: 3,
    scrollTrigger: {
      trigger: "#main",
      scroller: "body",
      toggleActions: "restart pause reverse pause",
      start: "top bottom",
      // end: "top 80%",
      scrub: 0.5,
      markers: true
    }
  });

  renderer.render(scene, camera);
}

const clock = new THREE.Clock();

function tick() {
  renderer.render(scene, camera);
  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
}

tick();