//Base Parameters
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

console.log(renderer);
document.body.appendChild(renderer.domElement);

if (window.innerWidth > 800) {
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
};

document.addEventListener("DOMContentLoaded", function(event) {
    var camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.set(0, 2, 25);

    // Add event listener for mouse wheel events
    document.addEventListener('wheel', handleMouseWheel, false);

    function handleMouseWheel(event) {
        // Adjust the camera's position based on the scroll direction
        var delta = event.deltaY;
        var zoomSpeed = 0.1; // Adjust this value to control the zoom speed

        if (delta < 0) {
            // Zoom in
            camera.position.z -= zoomSpeed;
        } else {
            // Zoom out
            camera.position.z += zoomSpeed;
        }
    }

    var scene = new THREE.Scene();
    var city = new THREE.Object3D();
    var smoke = new THREE.Object3D();
    var town = new THREE.Object3D();
    var createCarPos = true;
    var uSpeed = 0.0002; // Speed for Left and Right camera movement, see below.
    var vSpeed = 0.0010; // Speed for Up and Down camera movement, see below.

    // Make it responsive
    window.addEventListener("resize", onWindowResize, false);

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

    var scene = new THREE.Scene();
    var city = new THREE.Object3D();
    var smoke = new THREE.Object3D();
    var town = new THREE.Object3D();
    var createCarPos = true;
    var uSpeed = 0.0002; // Speed for Left and Right camera movement, see below.
    var vSpeed = 0.0010; // Speed for Up and Down camera movement, see below.

    // Make it responsive
    window.addEventListener("resize", onWindowResize, false);

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

//////////////////////////////////////////////////          //////////////////////////////////////////////////
//                                              //          //                                              //
//   How to change the HORIZONTAL (Left/Right)  //          //     How to change the VERTICAL (Up/Down)     //
//             speed of the Camera:             //          //             speed of the Camera:             //
//         -------------------------            //          //         -------------------------            //
//   Change the uSpeed value on Line 39 above.  //          //   Change the vSpeed value on Line 40 above.  //
//          For example: 0.001; > 0.002;        //          //          For example: 0.001; > 0.002;        //
//         -------------------------            //          //         -------------------------            //
//          (Default value is/was 0.001)        //          //          (Default value is/was 0.001)        //
//                                              //          //                                              //
//////////////////////////////////////////////////          //////////////////////////////////////////////////

// FOG Background (Single Color & Multi-Color)
////////////////////////////////////////////////////////////////////////////////////////////////////
// var setcolor = 0xF02050; <- This is the default example used in AsmrProg's Video/Tutorial.     //
////////////////////////////////////////////////////////////////////////////////////////////////////
// Single Color Method:                                                                           //
// --------------------                                                                           //
// var setcolor = 0x1A9CBC;                                                                       //
// scene.background = new THREE.Color(setcolor);                                                  //
// scene.fog = new THREE.Fog(setcolor, 10, 30);                                                   //
////////////////////////////////////////////////////////////////////////////////////////////////////
// Multi-Color Method:                                                                            //
var colors = [0x62323A, 0x724638, 0xA28030]; // Array of color values                             //
//                                                                                                //
// Create a gradient texture                                                                      //
var canvas = document.createElement('canvas');                                                    //
var context = canvas.getContext('2d');                                                            //
canvas.width = 256;                                                                               //
canvas.height = 1;                                                                                //
//                                                                                                //
var gradient = context.createLinearGradient(0, 0, 256, 0);                                        //
gradient.addColorStop(0, '#' + colors[0].toString(16));                                           //
gradient.addColorStop(0.5, '#' + colors[1].toString(16));                                         //
gradient.addColorStop(1, '#' + colors[2].toString(16));                                           //
//                                                                                                //
context.fillStyle = gradient;                                                                     //
context.fillRect(0, 0, 256, 1);                                                                   //
//                                                                                                //
// Create a texture from the gradient                                                             //
var texture = new THREE.CanvasTexture(canvas);                                                    //
texture.wrapS = THREE.ClampToEdgeWrapping;                                                        //
texture.wrapT = THREE.ClampToEdgeWrapping;                                                        //
texture.minFilter = THREE.LinearFilter;                                                           //
texture.magFilter = THREE.LinearFilter;                                                           //
//                                                                                                //
// Set the fog background                                                                         //
scene.background = texture;                                                                       //
scene.fog = new THREE.Fog(colors[0], 10, 32);                                                     //
//////////////////////////////////////////////////                                                //
//                                              //                                                //
//       How to change the Fog Density:         //                                                //
//          -------------------------           //                                                //
//   Change the second value on Line [] above.  //                                                //
//      The higher the value = Less density.    //                                                //
//      The lower the more = MORE Density.      //                                                //
//                                              //                                                //
//                                              //                                                //
//////////////////////////////////////////////////                                                //
////////////////////////////////////////////////////////////////////////////////////////////////////

// Random Function
function mathRandom(num = 50){
    var numValue = - Math.random() * num + Math.random() * num;
    return numValue;
};
//////////////////////////////////////////////////
//                                              //
//        How to change the buildings in        //
//    terms of their Height/Density/Spacing:    //
//          -------------------------           //
//      Change the value on Line 57 above.      //
//          -------------------------           //
//          (Default value is/was 1)            //
//       ("(num = 1)" shows weird effects)      //
//          -------------------------           //
//     (Any value that exceeds 100 is..         //
//      ...idiotic/pointless in My opinion!)    //
//                                              //
//////////////////////////////////////////////////

// Change Building Colors
var setTintNum = true;
function setTintColor(){
    if(setTintNum){
        setTintNum = false;
        var setColor = 0x000000;
    }else{
        setTintNum = true;
        var setColor = 0x000000;
    };
    return setColor;
};

var cubeposition = {x: 0, z: 0};

// Create City
function init() {
    var segments = 2;
    var planeSize = 60;
    var boundary = planeSize / 2;

    // Function to create a building on top of the plane
    function createBuilding(x, y, z, width, height, depth) {
      var geometry = new THREE.BoxGeometry(width, height, depth);
      var material = new THREE.MeshStandardMaterial({
        color: setTintColor(),
        wireframe: false,
        shading: THREE.SmoothShading,
        side: THREE.DoubleSide,
      });
      var building = new THREE.Mesh(geometry, material);

      // Adjust the y position to place the building on top of the plane
      building.position.set(x, y + height / 2, z);

      return building;
    }

    for (var i = 1; i < 100; i++) {
      var cubeWidth = 0.9;
      var width = cubeWidth + mathRandom(1 - cubeWidth);
      var height = 0.1 + Math.abs(mathRandom(8));
      var depth = cubeWidth + mathRandom(1 - cubeWidth);
      var x = Math.round(mathRandom(boundary - width)) * (Math.random() < 0.5 ? -1 : 1);
      var y = 0;
      var z = Math.round(mathRandom(boundary - depth)) * (Math.random() < 0.5 ? -1 : 1);

      // Check if building is within the boundaries
      if (
        Math.abs(x) + width / 2 > boundary ||
        Math.abs(z) + depth / 2 > boundary ||
        y + height / 2 > planeSize / 2
      ) {
        continue;
        // Skip this iteration if building is outside the boundaries
      }

      var floorGeometry = new THREE.BoxGeometry(width, 0.05, depth);
      var floorMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff,
        wireframe: true,
        transparent: true,
        opacity: 0.03,
        side: THREE.DoubleSide,
      });
      var floor = new THREE.Mesh(floorGeometry, floorMaterial);

      var building = createBuilding(x, y, z, width, height, depth);

      floor.position.set(building.position.x, 0, building.position.z);

      town.add(floor);
      town.add(building);
    }
  }

  //Particulars
    var gmaterial = new THREE.MeshToonMaterial({ color: 0xFFFF00, side: THREE.DoubleSide });
    var gparticular = new THREE.CircleGeometry(0.01, 3);
    var aparticular = 5;

    for (var h = 1; h < 300; h++) {
        var particular = new THREE.Mesh(gparticular, gmaterial);
        particular.position.set(mathRandom(aparticular), mathRandom(aparticular), mathRandom(aparticular));
        particular.rotation.set(mathRandom(), mathRandom(), mathRandom());
        smoke.add(particular);
    };

    var pmaterial = new THREE.MeshPhongMaterial({
        color: 0x000000,
        side: THREE.FrontSide,
        shininess: 10,
        opacity: 0.9,
        transparent: true
    });

var pgeometry = new THREE.PlaneGeometry(60, 60);
var pelement = new THREE.Mesh(pgeometry, pmaterial);
pelement.rotation.x = -Math.PI / 2; // Rotate the plane element to face upwards
pelement.position.y = 0; // Set the plane element's position at the same level as the buildings
pelement.receiveShadow = true;
city.add(pelement);

// Mouse Functions
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(), INTERSECTED;
var touchX, touchY;
var threshold = 5; // or whatever value you want to use

function onMouseMove(e){
    e.preventDefault();
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (e.clientY / window.innerHeight) * 2 + 1;

    city.rotation.y -= ((mouse.x * 8) - camera.rotation.y) * uSpeed;
    city.rotation.x -= ((-(mouse).y * 2) - camera.position.x) * vSpeed;
};

function rotateObject(deltaX, deltaY) {
    // Rotate the city based on the touch movement
    city.rotation.y -= deltaX * uSpeed;
    city.rotation.x -= deltaY * vSpeed;

    // Limit the vertical rotation angle of the city
    city.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, city.rotation.x));
}

function onDocumentTouchStart(e){
    if(e.touches.length == 1){
        e.preventDefault();
        touchX = e.touches[0].pageX;
        touchY = e.touches[0].pageY;
    };
};

function onDocumentTouchMove(event){
    // Get the first touch point
    var touch = event.touches[0];

    // Calculate the distance moved from the previous touch point
    var deltaX = touch.clientX - touchX;
    var deltaY = touch.clientY - touchY;

    // Check if the touch has moved beyond a certain threshold
    if (Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold) {
      // Prevent the default touch behavior (e.g. scrolling)
      event.preventDefault();

      // Rotate the object based on the touch movement
      rotateObject(deltaX, deltaY);

      // Update the touch point for the next touch move event
      touchX = touch.clientX;
      touchY = touch.clientY;
    }
}

window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('touchstart', onDocumentTouchStart, false);
window.addEventListener('touchmove', onDocumentTouchMove, false);

// Create Lights
var ambientLight = new THREE.AmbientLight(0xFFFFFF, 4);
var lightFront = new THREE.SpotLight(0xFFFFFF, 20, 10);
var lightBack = new THREE.PointLight(0xFFFFFF, 0.5);
var spotLightHelper = new THREE.SpotLightHelper(lightFront);

lightFront.rotation.x = 45 * THREE.MathUtils.DEG2RAD;
lightFront.rotation.z = -45 * THREE.MathUtils.DEG2RAD;
lightFront.position.set(5, 5, 5);
lightFront.castShadow = true;
lightFront.shadow.mapSize.width = 6000;
lightFront.shadow.mapSize.height = lightFront.shadow.mapSize.width;
lightFront.penumbra = 0.1;
lightBack.position.set(0, 6, 0);

smoke.position.y = 2;

scene.add(ambientLight);
city.add(lightFront);
scene.add(lightBack);
scene.add(city);
city.add(smoke);
city.add(town);

// Grid Helper
var gridHelper = new THREE.GridHelper(60, 120, 0xFF0000, 0x000000);
city.add(gridHelper);

// Cars World - Code to create Car mesh
var createCars = function (cScale = 2, cPos = 20, cColor = 0xFFFF00) {
    var cMat = new THREE.MeshToonMaterial({color: cColor, side: THREE.DoubleSide});
    var cGeo = new THREE.BoxGeometry(1, cScale / 40, cScale / 40);
    var cElem = new THREE.Mesh(cGeo, cMat),
        w = cElem.geometry.parameters.width,
        h = cElem.geometry.parameters.height
    var cAmp = 3;

    if (createCarPos) {
        createCarPos = false;
        cElem.position.x = -cPos;
        cElem.position.z = (mathRandom(cAmp));

        TweenMax.to(cElem.position, 3, {x: cPos, repeat: -1, yoyo: true, delay: mathRandom(3)});
    }else{
        createCarPos = true;
        cElem.position.x = (mathRandom(cAmp));
        cElem.position.z = -cPos;
        cElem.rotation.y = 90 * THREE.MathUtils.DEG2RAD;

        TweenMax.to(cElem.position, 5, {z: cPos, repeat: -1, yoyo: true, delay: mathRandom(3), ease: Power1.easeInOut});
    };
    cElem.receiveShadow = true;
    cElem.castShadow = true;
    cElem.position.y = Math.abs(mathRandom(5));
    city.add(cElem);
    return cElem;
};

var myCar = createCars(); // Assign the returned (Car) mesh to a variable
console.log(myCar); // Now I can access > log the Car mesh
console.log(myCar.position);
console.log(myCar.rotation);
console.log(myCar.scale);

var generateLines = function(){
    for(var i = 0; i < 60; i++) {
        createCars(0, 1, 20);
    };
};

// Camera Position
var cameraSet = function () {
    createCars(0.1, 20, 0xFFFFFF);
};

//Animate Functions
var animate = function () {
    var time = Date.now() * 0.00005;
    requestAnimationFrame(animate);

    city.rotation.y -= ((mouse.x * 8) - camera.rotation.y) * uSpeed;
    city.rotation.x -= (-(mouse.y * 2) - camera.position.x) * vSpeed;
    if (city.rotation.x < -0.05) {
        city.rotation.x = -0.05;
    } else if (city.rotation.x > 1) {
        city.rotation.x = 1;
    }
    var cityRotation = Math.sin(Date.now() / 5000) * 13;

    for (let i = 0, l = town.children.length; i < l; i++) {
        var object = town.children[i];
    }

    smoke.rotation.y += 0.01;
    smoke.rotation.x += 0.01;

    camera.lookAt(city.position);
    renderer.render(scene, camera);
};

//const container = document.createElement('div');
//container.id = 'text-container';
//document.body.appendChild(container);

//const h1 = document.createElement('h1');
//h1.innerText = 'YuGiOh! Capsule Monster Coliseum';
//container.appendChild(h1);

//const p = document.createElement('p');
//p.innerText = '- Pure Society Edition -';
//container.appendChild(p);

//const span = document.createElement('span');
//span.innerText = ' ';
//h1.appendChild(span);

container.style.position = 'absolute';
container.style.top = '50%';
container.style.left = '50%';
container.style.transform = 'translate(-50%, -50%)';
container.style.zIndex = '1';

// Calling Main Functions
generateLines();
init();

// Add a callback to the animate function to transition to the black screen
animate();
    // Create the black screen element
    const blackScreen = document.createElement('div');
    blackScreen.className = 'black-screen';
    document.body.appendChild(blackScreen);

    // Remove the animation container and under-panels elements
    const animationContainer = document.querySelector('.animation-container');
    const underPanels = document.querySelector('.under-panels');
    animationContainer.remove();
    underPanels.remove();
});