import { loadTexture, makeProgram } from "./gl";
import { blockLookup, BlockType, generateMissingChunks, makeWorld, updateWorldGeometry } from './world';
import * as se3 from './se3';
import { makeBufferFromFaces, makeFace } from "./geometry";

const TEST_VSHADER = `
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec2 aTextureCoord;

uniform mat4 uProjection;
uniform mat4 uModel;
uniform mat4 uView;
uniform vec3 uLightDirection;
uniform float uAmbiantLight;

varying highp vec2 vTextureCoord;
varying lowp vec3 vLighting;
varying lowp float vDistance;

void main() {
    highp mat4 modelview = uView * uModel;

    gl_Position = uProjection * modelview * vec4(aPosition, 1.0);

    lowp vec3 normal = mat3(uModel) * aNormal;
    lowp float diffuseAmount = max(dot(-uLightDirection, normal), 0.0);
    lowp vec3 ambiant = uAmbiantLight * vec3(1.0, 1.0, 0.9);
    vLighting = ambiant + vec3(1.0, 1.0, 1.0) * diffuseAmount;

    vTextureCoord = aTextureCoord;

    vDistance = length(modelview * vec4(aPosition, 1.0));
}
`;

const TEST_FSHADER = `
uniform sampler2D uSampler;
uniform lowp vec3 uFogColor;

varying highp vec2 vTextureCoord;
varying lowp vec3 vLighting;
varying lowp float vDistance;

void main() {
    highp vec4 color = texture2D(uSampler, vTextureCoord);
    lowp float fogamount = smoothstep(30.0, 90.0, vDistance);
    gl_FragColor = vec4(mix(vLighting * color.rgb, uFogColor, fogamount), color.a);
}
`;

/** Draw.
 *
 * @param {WebGLRenderingContext} gl
 */
function draw(gl, params, objects) {
    const skyColor = [0.6, 0.8, 1.0];

    gl.clearColor(...skyColor, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const camrot = params.camera.orientation;
    const campos = params.camera.position;
    const viewMatrix = se3.product(
        se3.rotxyz(-camrot[0], -camrot[1], -camrot[2]),
        se3.translation(-campos[0], -campos[1], -campos[2])
    );

    let lastGlContext;

    for (const {glContext, position, orientation, geometry} of objects) {
        if (glContext !== lastGlContext) {
            glContext.setupScene({
                projectionMatrix: params.projMatrix,
                viewMatrix,
                fogColor: skyColor,
                lightDirection: params.lightDirection,
                ambiantLightAmount: params.ambiantLight,
            });
        }

        lastGlContext = glContext;

        glContext.drawObject({
            position,
            orientation,
            glBuffer: geometry.glBuffer,
            numVertices: geometry.numVertices,
        });
    }
}

const stuff = {
    lastFrameTime: 0,
};

function handleKeys(params) {
    const move = (forward, right) => {
        const dir = [right, 0, -forward, 1.0];
        const ori = se3.roty(params.camera.orientation[1]);
        const tf = se3.apply(ori, dir);

        if (params.flying) {
            params.camera.position[0] += tf[0];
            params.camera.position[2] += tf[2];
        }
        if (params.isOnGround) {
            params.camera.velocity[0] = tf[0];
            params.camera.velocity[2] = tf[2];
        } else {
            params.camera.velocity[0] += tf[0] / 60;
            params.camera.velocity[2] += tf[2] / 60;

            if (Math.abs(params.camera.velocity[0]) > Math.abs(tf[0])) {
                params.camera.velocity[0] = tf[0];
            }
            if (Math.abs(params.camera.velocity[2]) > Math.abs(tf[2])) {
                params.camera.velocity[2] = tf[2];
            }
        }
    };

    params.keys.forEach(key => {
        switch (key) {
            case 'KeyW':
                move(0.1, 0.0);
                return;
            case 'KeyA':
                move(0.0, -0.1);
                return;
            case 'KeyS':
                move(-0.1, 0.0);
                return;
            case 'KeyD':
                move(0.0, 0.1);
                return;

            case 'Space':
                if(params.flying) {
                    params.camera.position[1] += 0.1;
                } else {
                    if (params.jumpAmount > 0) {
                        const amount = 0.4 * params.jumpAmount;
                        params.camera.velocity[1] += amount / 60;
                        params.jumpAmount -= amount;
                    }
                }
                return;
            case 'ControlLeft':
                params.camera.position[1] -= 0.1;
                return;
        }
    });
}

function getObjects(world, z, x, glContext) {
    return world.chunks
        .filter(chunk => {
            if (chunk.position.z < z - 8 * 16) return false;
            if (chunk.position.z > z + 7 * 16) return false;
            if (chunk.position.x < x - 8 * 16) return false;
            if (chunk.position.x > x + 7 * 16) return false;

            if (chunk.buffer === undefined) {
                return false;
            }

            return true;
        })
        .map(chunk => ({
            position: [0.0, 0.0, 0.0],
            orientation: [0.0, 0.0, 0.0],
            geometry: chunk.buffer,
            glContext,
        }));
}

function updatePhysics(params) {
    params.camera.velocity[1] -= 9.8 / 60 / 60;

    const oldPos = params.camera.position;
    const targetPos = params.flying ? oldPos : params.camera.position.map((v, i) => v + params.camera.velocity[i]);
    const {isOnGround, newPos} = checkCollision(oldPos, targetPos, params.world);
    params.camera.position = newPos;
    params.camera.velocity = newPos.map((v, i) => v - oldPos[i]);
    if (isOnGround) {
        params.jumpAmount = 6;
        params.camera.velocity = params.camera.velocity.map(v => v * 0.7);
    }
    params.isOnGround = isOnGround;
}

function tagABlock(gl, params, objects) {
    const dir = [0, 0, -1, 1.0];
    const camori = params.camera.orientation;
    const ori = se3.inverse(se3.rotxyz(-camori[0], -camori[1], -camori[2]));
    const viewDirection = se3.apply(ori, dir).slice(0, 3);

    const face = markBlock(params.world, params.camera.position, viewDirection, params.blockSelectDistance);
    if (face === undefined) {
        return;
    }

    if (params.tagBuffer !== undefined) {
        gl.deleteBuffer(params.tagBuffer.glBuffer);
        delete params.tagBuffer;
    }
    const buffer = makeBufferFromFaces(gl, [face]);
    params.tagBuffer = buffer;

    const obj =  {
            position: [0.0, 0.0, 0.0],
            orientation: [0.0, 0.0, 0.0],
            geometry: buffer,
            glContext: params.worldGl,
    };

    objects.push(obj);
}

function tick(time, gl, params) {
    handleKeys(params);
    updatePhysics(params);

    const campos = params.camera.position;

    // expensive stuff, can take several cycles
    try {
        let timeLeft = 10;
        const start = performance.now();
        generateMissingChunks(params.world, campos[2], campos[0], timeLeft);

        timeLeft -= performance.now() - start;
        updateWorldGeometry(gl, params.world, campos[2], campos[0], timeLeft);
    }
    catch (ex) {
        if (ex !== 'timesup') {
            throw ex;
        }
    }

    const objects = getObjects(params.world, campos[2], campos[0], params.worldGl);

    tagABlock(gl, params, objects);

    draw(gl, params, objects);

    const dt = (time - stuff.lastFrameTime) * 0.001;
    stuff.lastFrameTime = time;

    document.querySelector('#fps').textContent = `${1.0 / dt} fps`;
    document.querySelector('#lightDirVec').textContent = JSON.stringify(params.lightDirection);

    requestAnimationFrame(time => tick(time, gl, params));
}

function checkCollision(curPos, newPos, world) {
    // I guess Steve is about 1.7 m tall?
    // he also has a 60x60 cm axis-aligned square section '^_^
    // box is centered around the camera
    const steveBB = [
        [-0.3, 0.2, -0.3],
        [-0.3, 0.2, 0.3],
        [0.3, 0.2, -0.3],
        [0.3, 0.2, 0.3],

        [-0.3, -1.5, -0.3],
        [-0.3, -1.5, 0.3],
        [0.3, -1.5, -0.3],
        [0.3, -1.5, 0.3],
    ];

    const translate = (v, pos) => v.map((el, i) => el + pos[i]);

    let dp = newPos.map((x, i) => x - curPos[i]);
    let isOnGround = false;

    for (let i = 0; i < 3; i++) {
        const newSteve = v => v.map((x, j) => i === j ? x + newPos[j] : x + curPos[j]);
        for (const point of steveBB.map(newSteve)) {
            const block = blockLookup(world, ...point);
            if (block.type !== BlockType.AIR) {
                if (i === 1 && dp[i] < 0) {
                    isOnGround = true;
                }
                dp[i] = 0;
            }
        }
    }
    for (let i = 0; i < 3; i++) {
        const newSteve = v => v.map((x, j) => curPos[j] + x + dp[j]);
        for (const point of steveBB.map(newSteve)) {
            const block = blockLookup(world, ...point);
            if (block.type !== BlockType.AIR) {
                dp[i] = 0;
            }
        }
    }

    return {
        newPos: translate(curPos, dp),
        isOnGround,
    };
}

function minIndex(arr) {
    return arr.reduce((min, val, i) => val >= arr[min] ? min : i, -1);
}

function movePoint(p, s, u) {
    return [p[0] + s * u[0], p[1] + s * u[1], p[2] + s * u[2]];
}

function rayThroughGrid(origin, direction, maxDistance) {
    const range = i => [...Array(i).keys()];

    const nextGrid = range(3).map(i => direction[i] > 0 ?
        Math.floor(origin[i] + 0.5) + 0.5 :
        Math.floor(origin[i] + 0.5) - 0.5);
    const distanceToGrid = range(3).map(i => (nextGrid[i] - origin[i]) / direction[i])
        .map(v => v === 0.0 ? Number.POSITIVE_INFINITY : v);
    const axis = minIndex(distanceToGrid);
    const rayLength = distanceToGrid[axis];

    if (rayLength > maxDistance) {
        return {};
    }

    const position = movePoint(origin, distanceToGrid[axis], direction);
    const normal = range(3).map(i => i === axis ? -Math.sign(direction[i]) : 0);

    return {position, normal, distance: rayLength};
}

function castRay(world, origin, direction, maxDistance) {
    let currentPoint = origin;

    while (maxDistance > 0) {
        const {position, normal, distance} = rayThroughGrid(currentPoint, direction, maxDistance);

        if (position === undefined) {
            return;
        }

        maxDistance -= distance;
        currentPoint = position;
        const blockCenter = movePoint(position, -0.5, normal);
        const block = blockLookup(world, ...blockCenter);

        if (block.type === BlockType.AIR) {
            continue;
        }

        return {
            block,
            normal,
        };
    }
}

function markBlock(world, cameraPosition, direction, maxDistance) {
    const hit = castRay(world, cameraPosition, direction, maxDistance);

    if (hit === undefined) {
        return;
    }

    const texture = [0, 14];
    const {normal, block} = hit;
    const faceCenter = movePoint(block.centerPosition, 0.51, normal);

    if (normal[0] > 0) {
        return makeFace('+x', texture, faceCenter);
    } else if (normal[0] < 0) {
        return makeFace('-x', texture, faceCenter);
    } else if (normal[1] > 0) {
        return makeFace('+y', texture, faceCenter);
    } else if (normal[1] < 0) {
        return makeFace('-y', texture, faceCenter);
    } else if (normal[2] > 0) {
        return makeFace('+z', texture, faceCenter);
    } else if (normal[2] < 0) {
        return makeFace('-z', texture, faceCenter);
    }
}

// Mine & place
// ------------
// [x] ray casting
// [x] block outline
// [ ] crosshair
// [ ] dynamic terrain re-rendering
// [ ] should use a linked list of air contact blocks
//    --> might not be needed. Only need to re-render a single chunk,
//        should be fast enough. We render 16 of them every time we
//        walk 16 blocks in any direction.

// Stuff I need to do:
// [x] a skybox
// [x] a movable camera
// [x] some kind of gravity
// [x] collision detection
// [x] more blocks
// [ ] ability to mine & place
// [x] generating & loading of more chunks
// [x] distance fog
// [ ] different biomes (with different noise stats)
// [ ] non-flowy water
// [ ] flowy water
// [ ] ALIGN CHUNK WITH WORLD COORDS
// [x] better controls
// [ ] save the world (yay) to local storage (bah)

async function initWorldGl(gl) {
    const program = makeProgram(gl, TEST_VSHADER, TEST_FSHADER);
    const texture = await loadTexture(gl, 'texture.png');

    // load those ahead of time
    const viewLoc = gl.getUniformLocation(program, 'uView');
    const modelLoc = gl.getUniformLocation(program, 'uModel');
    const projLoc = gl.getUniformLocation(program, 'uProjection');
    const samplerLoc = gl.getUniformLocation(program, 'uSampler');
    const fogColorLoc = gl.getUniformLocation(program, 'uFogColor');
    const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
    const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');

    const positionLoc = gl.getAttribLocation(program, 'aPosition');
    const normalLoc = gl.getAttribLocation(program, 'aNormal');
    const textureLoc = gl.getAttribLocation(program, 'aTextureCoord');

    const setupScene = (sceneParams) => {
        const {
            projectionMatrix,
            viewMatrix,
            fogColor,
            lightDirection,
            ambiantLightAmount,
        } = sceneParams;

        gl.useProgram(program);

        gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
        gl.uniform3fv(fogColorLoc, fogColor);
        gl.uniform3fv(lightDirectionLoc, lightDirection);
        gl.uniform1f(ambiantLoc, ambiantLightAmount);

        // doing this here because it's the same for all world stuff
        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.identity()));
        gl.uniform1i(samplerLoc, 0);

        gl.enableVertexAttribArray(positionLoc);
        gl.enableVertexAttribArray(normalLoc);
        gl.enableVertexAttribArray(textureLoc);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
    };

    const drawObject = (objectParams) => {
        const {
            glBuffer,
            numVertices,
        } = objectParams;

        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);

        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
        gl.vertexAttribPointer(normalLoc, 3, gl.BYTE, true, 20, 12);
        gl.vertexAttribPointer(textureLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);

        gl.drawArrays(gl.TRIANGLES, 0, numVertices);
    };

    return {
        setupScene,
        drawObject,
    };
}

async function main() {
    const canvas = document.querySelector('#game');
    const gl = canvas.getContext('webgl');

    if (gl === null) {
        console.error('webgl not available')
        return;
    }

    const params = {
        projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 100.0),
        camera: {
            position: [0.0, 70.5, 0.0],
            orientation: [0.0, Math.PI, 0.0],
            velocity: [0, 0, 0],
        },
        keys: new Set(),
        lightDirection: [-0.2, -0.5, 0.4],
        ambiantLight: 0.7,
        blockSelectDistance: 8,
        flying: false,
        isOnGround: false,
        world: makeWorld(),
        worldGl: await initWorldGl(gl),
    }

    document.querySelector('#lightx').oninput = e => {
        params.lightDirection[0] = e.target.value / 100;
    };
    document.querySelector('#lighty').oninput = e => {
        params.lightDirection[1] = e.target.value / 100;
    };
    document.querySelector('#lightz').oninput = e => {
        params.lightDirection[2] = e.target.value / 100;
    };
    document.querySelector('#ambiant').oninput = e => {
        params.ambiantLight = e.target.value / 100;
    };

    const collapsibles = document.getElementsByClassName("collapsible");
    for (const collapsible of collapsibles) {
        collapsible.onclick = e => {
            const content = collapsible.nextElementSibling;
            if (content.style.height === 'fit-content') {
                content.style.height = '0px';
            } else {
                content.style.height = 'fit-content';
            }
        };
    }

    canvas.onclick = e => {
        canvas.requestPointerLock();
        const keyListener = e => {
            if (e.type === 'keydown') {
                params.keys.add(e.code);

                switch (e.code) {
                    case 'KeyF':
                        params.flying = !params.flying;
                        console.log(`flying: ${params.flying}`)
                }
            } else {
                params.keys.delete(e.code);
            }
        };
        const moveListener = e => {
            params.camera.orientation[1] -= e.movementX / 500;
            params.camera.orientation[0] -= e.movementY / 500;

            params.camera.orientation[0] = Math.min(Math.max(
                params.camera.orientation[0], -Math.PI / 2
            ), Math.PI / 2);
        };
        const changeListener = () => {
            if (document.pointerLockElement === canvas) {
                return;
            }
            document.removeEventListener('pointerlockchange', changeListener);
            document.removeEventListener('pointermove', moveListener);
            document.removeEventListener('keydown', keyListener);
            document.removeEventListener('keyup', keyListener);
        };
        document.addEventListener('pointerlockchange', changeListener);
        document.addEventListener('pointermove', moveListener);
        document.addEventListener('keydown', keyListener);
        document.addEventListener('keyup', keyListener);
    };
    requestAnimationFrame(time => tick(time, gl, params));
}

window.onload = main;