import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";

import { OrbitControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js";

import { GLTFLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js";

import { Water } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/objects/Water.js';
import { TextureLoader } from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { Sky } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/objects/Sky.js';

let loadingManager = new THREE.LoadingManager();

loadingManager.onError = function (url) {
    console.error(`There was an error loading ${url}`);
};


const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 1000);

camera.position.set(0, 22, 250);

camera.lookAt(0, 0, 0);

camera.position.y += 1;

let lookAtPosition = new THREE.Vector3(0, 1120, 0);
camera.lookAt(lookAtPosition);

let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;

let object;

let controls;

let objToRender = 'dino';


const loader = new GLTFLoader();

const waterGeometry = new THREE.PlaneBufferGeometry(10000, 10000);

const water = new Water(
    waterGeometry,
    {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) {
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        }),
        alpha: 1.0,
        sunDirection: new THREE.Vector3(),
        sunColor: 0xffffff,
        waterColor: 0x001e0f,
        distortionScale: 20.7,
        fog: scene.fog !== undefined
    }
);
water.rotation.x = - Math.PI / 2;
scene.add(water);

const textureLoader = new THREE.TextureLoader(loadingManager);
textureLoader.load(
'https://raw.githubusercontent.com/simple11q/threejsshipscene/main/PooleWater2_small.jpg', 
  function(texture) {
    // Once the texture is loaded, create the skybox material
    const skyboxMaterial = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.BackSide
    });

    const skyboxGeometry = new THREE.SphereGeometry(800, 60, 40);


    const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

    scene.add(skybox);
  },
  function(xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  function(error) {
    console.error(error);
  }
);

function createLifebuoy(x, y, z) {
  loader.load( 
    'https://raw.githubusercontent.com/simple11q/threejsshipscene/main/lifebuoymodel.gltf',
    function (gltf) {
      const lifebuoy = gltf.scene;
      lifebuoy.position.set(x, y, z);
      const lifebuoyScale = 14; 
      lifebuoy.scale.set(lifebuoyScale, lifebuoyScale, lifebuoyScale);
      scene.add(lifebuoy);
      lifebuoys.push(lifebuoy); 
    }
  );
}

const lifebuoys = [];
const numberOfLifebuoys = 21;
const minRadius = 100; 
const maxRadius = 444; 

for (let i = 0; i < numberOfLifebuoys; i++) {
  const angle = Math.random() * 2 * Math.PI;
  const radius = minRadius + Math.random() * (maxRadius - minRadius); 
  const x = radius * Math.cos(angle);
  const z = radius * Math.sin(angle);
  createLifebuoy(x, 4, z); 
}

let boats = [];

loader.load(
  `https://raw.githubusercontent.com/simple11q/threejsshipscene/main/SM_Sailboat02.gltf`,
  function (gltf) {

    object = gltf.scene;
    object.position.y = 4;
    object.rotation.y = 1.72;

    const mainScale = 12;
    object.scale.set(mainScale, mainScale, mainScale);
    scene.add(object);

const radii = [400, 450, 500, 650]; 
for (let i = 0; i < 11; i++) { 
  const boat = object.clone();
  const scale = 8 * (0.1 + Math.random() * 1); 
  boat.scale.set(scale, scale, scale);
  scene.add(boat);
  const radius = radii[i % radii.length]; 
  boats.push({ mesh: boat, speed: Math.random() * 0.00002 + 0.00001, radius: radius }); 
}

  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  function (error) {
 
    console.error(error);
  }
);

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById("container3D").appendChild(renderer.domElement);

camera.position.z = objToRender === "dino" ? 200 : 1100;


const topLight = new THREE.DirectionalLight(0xffffff, 7); 
topLight.position.set(0, 500, 100)
topLight.castShadow = true;
scene.add(topLight);

const ambientLight = new THREE.AmbientLight(0x333333, objToRender === "dino" ? 2 : 1);
scene.add(ambientLight);

if (objToRender === "dino") {
  controls = new OrbitControls(camera, renderer.domElement);
}

let sinking = false;

function animate() {
  requestAnimationFrame(animate);
  if (!sinking) {
  if (object) {
    object.rotation.y -= 0.0007;
  }

for (const boat of boats) {
  const angle = boat.speed * Date.now();
  boat.mesh.position.x = Math.sin(angle) * boat.radius + object.position.x;
  boat.mesh.position.z = Math.cos(angle) * boat.radius + object.position.z;
  boat.mesh.rotation.y = -angle + Math.PI / 2; 
}

  water.material.uniforms['time'].value += 1.0 / 60.0;

  lifebuoys.forEach((lifebuoy, index) => {
    lifebuoy.rotation.x = Math.sin(Date.now() * 0.005 + index) * 0.04; 
    lifebuoy.rotation.z = Math.sin(Date.now() * 0.003 + index) * 0.041;
  });

  renderer.render(scene, camera);
}}


const funnyButton = document.getElementById('funnyButton');

funnyButton.addEventListener('click', doFunnyThing);

function changeWaterColor(water) {

  water.material.uniforms['waterColor'].value.set(0x8B4513);
}


const originalPosition = camera.position.clone();
let shakeTime = 0;
function shakeCamera() {
  if (shakeTime < 1) {
    camera.position.x = originalPosition.x + (Math.random() - 0.5) * 1.1;
    camera.position.y = originalPosition.y + (Math.random() - 0.5) * 1.1;
    camera.position.z = originalPosition.z + (Math.random() - 0.5) * 1.1;
    shakeTime += 0.01;
    requestAnimationFrame(shakeCamera);
  } else {
    camera.position.copy(originalPosition);
  }
}


function sinkBoat() {
  sinking = true;
  object.position.y = -50; 
  object.rotation.x = Math.PI; 
}

function doFunnyThing() {
  console.log("dofunnything button pressed");
  shakeCamera(); 
  setTimeout(changeWaterColor(water), 1000); 
  //setTimeout(sinkBoat, 3000);
}

window.addEventListener("resize", function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

document.onmousemove = (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
}

animate();