import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let fft = [];
let data1;
let data2;
let data3;

const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });

$.get({
    url: 'https://files.wnology.io/5fd77c0d33491f0006da9de8/ThreeJS/docs/temp/1620291600000-144f8cf0ddf47a2d6676017480e6794f.json',
    async: false
}, function(data) {
    data1 = data
});

$.get({
    url: 'https://files.wnology.io/5fd77c0d33491f0006da9de8/ThreeJS/docs/temp/1620291600000-4b685a1eaa1bb5cd30ff2a2f0627d221.json',
    async: false
}, function(data) {
    data2 = data
});

$.get({
    url: 'https://files.wnology.io/5fd77c0d33491f0006da9de8/ThreeJS/docs/temp/1620291600000-96a43a9c906b2c173bda688c0afb6cd2.json',
    async: false
}, function(data) {
    data3 = data
});

fft.push(data1)
fft.push(data2)
fft.push(data3)
fft.push(data1)
fft.push(data2)
fft.push(data3)
fft.push(data1)
fft.push(data2)
fft.push(data3)
fft.push(data1)

console.log(fft)

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(-100, 100, 150);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2(1, 1);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.75));

createAGrid()

let g = new THREE.BoxGeometry();
g.translate(0, 0.5, 0);
let m = new THREE.MeshLambertMaterial({
    onBeforeCompile: shader => {
        shader.uniforms.lut = {
            value: new THREE.TextureLoader().load(imgData)
        }
        shader.vertexShader = `
      varying float vCurrHeight;
      ${shader.vertexShader}
    `.replace(
            `#include <worldpos_vertex>`,
            `
        #include <worldpos_vertex>
        vCurrHeight = (instanceMatrix * vec4( transformed, 1.0 )).y;
        
      `
        );
        shader.fragmentShader = `
      uniform sampler2D lut;
      varying float vCurrHeight;
      ${shader.fragmentShader}
    `.replace(
            `vec4 diffuseColor = vec4( diffuse, opacity );`,
            `
        float h = clamp(vCurrHeight / 30., 0., 1.);
        vec3 col = texture(lut, vec2(0.3, h)).rgb;
        vec4 diffuseColor = vec4( col, opacity );
      `
        );
        //console.log(shader.fragmentShader)
    }
});
let rows = fft.length;
let cols = 1008;
let factor = 300

let o = new THREE.InstancedMesh(g, m, rows * cols);

let dummy = new THREE.Object3D();
let mat4 = new THREE.Matrix4();
for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
        dummy.position.set(0, 0, (rows - 1) / 2 - y).multiplyScalar(20);
        dummy.position.set(-(cols - 1) / 2 + x, 0, dummy.position.z)
        dummy.position.set(dummy.position.x, dummy.position.y, dummy.position.z).multiplyScalar(0.243);

        let hData = fft[y][x].a

        dummy.scale.set(0.25, hData * factor, 0.25);
        dummy.updateMatrix();
        o.setMatrixAt(y * cols + x, dummy.matrix);
    }
}

scene.add(o);

window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onMouseMove);

renderer.setAnimationLoop(_ => {

    raycaster.setFromCamera(mouse, camera);

    const intersection = raycaster.intersectObject(o);

    if (intersection.length > 0) {

        info.style.display = "block";
        const instanceId = intersection[0].instanceId;

        o.getMatrixAt(instanceId, mat4);
        mat4.decompose(dummy.position, dummy.quaternion, dummy.scale);

        info.innerText = `data: ${dummy.scale.y/factor}`;

    } else {
        info.style.display = "none";
    }

    renderer.render(scene, camera);
})

function onMouseMove(event) {

    event.preventDefault();

    info.style.transform = `translate(${event.clientX + 15}px, ${event.clientY + 5}px)`;

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

}

function createAGrid(opts) {
    var gridXZ = new THREE.GridHelper(250, 6)
    gridXZ.scale.set(1, 0.5, 0.25);
    scene.add(gridXZ);

    var gridXY = new THREE.GridHelper(250, 6);
    gridXY.position.z = -31, 25
    gridXY.position.y = 125
    gridXY.rotation.x = Math.PI / 2;
    scene.add(gridXY);

    var gridYZ = new THREE.GridHelper(250, 3);
    gridYZ.position.x = -125
    gridYZ.position.y = 125
    gridYZ.rotation.z = Math.PI / 2;
    gridYZ.scale.set(1, 1, 0.25);
    scene.add(gridYZ);
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}