import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js";
    import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js";
    import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/controls/OrbitControls.js';
    import * as dat from 'https://cdn.jsdelivr.net/npm/dat.gui.ml@0.0.1/build/dat.gui.module.js';

    const scene = new THREE.Scene();
    const canvas = document.querySelector('canvas.webgl');
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    const light = new THREE.AmbientLight( 0x404040 );
    const loadingManager = new THREE.LoadingManager();
    const aspect = window.innerWidth / window.innerHeight

    let insetWidth, insetHeight

    scene.add( light );
    const light1 = new THREE.PointLight( 0x404040, 5, 50 );
    light.position.set( 100, 100, 100 );
    scene.add( light1 );

    const renderer = new THREE.WebGLRenderer({
      canvas: canvas
    });

  renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.setClearColor( 0x89cff0, 0 );
    const texture = new THREE.TextureLoader();
    texture.load('https://cdn.glitch.global/9fc7b6f3-577d-4a75-acde-3ff7704c6420/Epic_BlueSunset_EquiRect_flat.png?v=1650445438016' , function(texture){
      scene.background = texture;
  });


  let cameraTop = new THREE.PerspectiveCamera(
  90,
  aspect,
  0.1,
  500
  );

  cameraTop.position.set(0, 10, 0);
  cameraTop.lookAt(0, 0, -10);

  cameraTop.name = "OverheadCam";

  camera.add(cameraTop)

  camera.position.x = 5;
  camera.position.y = 2;
  camera.position.z = 3;

  camera.rotation.x = 0.2;
  camera.rotation.y = 9.5;


  const progressBar = document.getElementById('progress-bar');
  const bodyHTML = document.querySelector('body')
  const progressBarContainer = document.querySelector(".progress-bar-container");

    loadingManager.onProgress = function(url, loaded, total){
    progressBar.value = ( loaded / total ) * 100;
    bodyHTML.style.overflowY = 'scroll'
  }

  loadingManager.onLoad = function(){
    progressBarContainer.style.display = 'none';
    console.log("finished!!");
    bodyHTML.style.overflowY = 'scroll';

  }

  const loader = new GLTFLoader(loadingManager);

  loader.load( 'https://cdn.glitch.me/9fc7b6f3-577d-4a75-acde-3ff7704c6420/RABOTI.glb?v=1651041419117', function ( gltf ) {
  scene.add(gltf.scene);
  }, undefined, function ( error ) {
  console.error( error );
  } );

  loader.load( 'https://cdn.glitch.global/9fc7b6f3-577d-4a75-acde-3ff7704c6420/ZAL.glb?v=1651041146942', function ( gltf ) {
  scene.add(gltf.scene);
  }, undefined, function ( error ) {
  console.error( error );
  } );

  loader.load( 'https://cdn.glitch.global/3e6dd8ed-0bf6-4a7d-8574-aa334f54fe16/GlassHall2.glb?v=1649960366473', function ( gltf ) {
  scene.add(gltf.scene);
  gltf.scene.scale.set(2,2,2)
  }, undefined, function ( error ) {
  console.error( error );
  } );

  const sections = document.querySelectorAll('.section')

  gsap.registerPlugin(ScrollTrigger);
  ScrollTrigger.defaults({
    scrub: 1,
  })

  gsap.to(camera.position, {
    x: -5,
    ease: 'none',
    scrollTrigger:
    {
      trigger: sections[1],
    },
  });

  gsap.to(camera.position, {
    ease: "none",
    z: -8,
      scrollTrigger: {
        trigger:sections[4],
      },
  });
  //////////////////////////////////////////////////////////////////

  window.onscroll = function (){
    var scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    console.log(scrollTop)

     if(scrollTop >= 1400){
       console.log("1 turn")
      gsap.to(camera.rotation,{
        ease:"none",
        y: -11,
        x: 0,
      })
    }
   else{
     console.log("2 turn")
    gsap.to(camera.rotation,{
      ease:"none",
      y: -9.5,
      x: 0,
    })
   }
   if(scrollTop >= 3700){
     console.log("3 turn")
      gsap.to(camera.rotation,{
      ease:"none",
      y: -12.5,
      x: 0,
      scrollTrigger:{
        trigger: sections[6]
      }
    })
  }
}

gsap.to(camera.position, {
  x: 1,
  ease: "none",
  scrollTrigger:
  {
    trigger: sections[8],
  },
})

const gui = new dat.GUI()
  const cameraFolder = gui.addFolder('Camera')
  cameraFolder.add(camera.rotation, 'x', -100, 100)
  cameraFolder.add(camera.rotation, 'y', -100, 100)
  cameraFolder.add(camera.rotation, 'z', -100, 100)
  const z = gui.addFolder('cameraFolder')
  cameraFolder.add(camera.position, 'x', -100, 100)
  cameraFolder.add(camera.position, 'y', -100, 100)
  cameraFolder.add(camera.position, 'z', -100, 100)

  cameraFolder.open()

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

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}
animate();