let parsedGR2s = [];
let customObjectList = [];
let globalCameraState, focusHead, focusWhole, camNeedsReset;

let canvas, loader, ddsLoader, postScene, controls, axesHelper, renderer, postCamera;
let camera, scene, target;
let zoomInInterval, zoomOutInterval, rotateLeftInterval, rotateRightInterval;
let hemiLight, hemiHelper;
let pointLight, pointHelper;

//let ambLight, ambHelper; //<-- maybe use this

const params = {
    format: THREE.DepthFormat,
    type: THREE.UnsignedShortType
};


const planeGeom = new THREE.PlaneGeometry( 5, 20, 32 );
const planeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( planeGeom, planeMaterial );

const skinBFrag = document.getElementById("SkinBShader").textContent;

THREE.Cache.enabled = true;

const vertShaderText = `
    //Input variables
    attribute vec4 aNormal;
    attribute vec4 aTangent;

    //For AnimatedUV
    uniform bool isAnimatedUV;
    uniform float Clock;
    uniform float ClockRandomOffset;
    uniform vec2 animTexUVScrollSpeed0;
    uniform vec2 animTexRotationPivot0;
    uniform float animTexRotationSpeed0;
    uniform vec2 animTexUVScrollSpeed1;
    uniform vec2 animTexRotationPivot1;
    uniform float animTexRotationSpeed1;
    uniform vec2 animTexUVScrollSpeed2;
    uniform vec2 animTexRotationPivot2;
    uniform float animTexRotationSpeed2;


    //lighting
    uniform vec3 viewNormal;
    uniform vec3 lightPos;
    uniform mat4 lightProjectionMatrix;
    uniform mat4 lightProjectionMatrixInverse;

    struct OutputVertex {
        vec4 light_Dir; //illumNormal_vNx
        vec4 view_Dir; //viewNormal_vNy
        vec4 illumCoords; //illumCoords_vNz
        vec4 fallOffCoords; //falloffCoords
        vec4 shadowCoords; //shadowCoords
        vec4 o_pos; //object position in world space

        //Object space
        vec4 w_pos;

        //World space
        vec2 texCoord;
        vec4 o_normal;
        vec3 w_normal;
        vec3 w_tangent;
        vec3 w_binormal;

        //light space
        vec4 l_pos;
    };

    varying OutputVertex In;

    void calcLighting(OutputVertex out_vert) {
        vec4 pointLight01_Dir = vec4(lightPos, 1.0) - out_vert.w_pos;
        vec3 illum = pointLight01_Dir.xyz - out_vert.w_pos.xyz * pointLight01_Dir.www;

        //vec4 illumCoords = calcIllumMapCoords(out_vert.w_pos);

        //output variable setting
        out_vert.light_Dir = pointLight01_Dir;
        out_vert.view_Dir =  vec4(cameraPosition, 1.0) - out_vert.w_pos;

        out_vert.l_pos = (lightProjectionMatrix * lightProjectionMatrixInverse) * modelMatrix * out_vert.o_pos;
    }

    //dont mess with this
    void main(void) {
        OutputVertex out_vert;
        out_vert.o_pos = vec4(position, 1.0);
        out_vert.w_pos = modelViewMatrix * modelMatrix * out_vert.o_pos;
        gl_Position = projectionMatrix * out_vert.w_pos;

        out_vert.o_normal = (aNormal / 127.5) - vec4(1.0,1.0,1.0,1.0);
        vec3 w_normal = (2.0/255.0) * aNormal.xyz - 1.0;
        vec3 w_tangent = (2.0/255.0) * aTangent.xyz - 1.0;
        out_vert.w_normal = mat3(viewMatrix) * w_normal;
        out_vert.w_tangent = mat3(viewMatrix) * w_tangent;
        out_vert.w_binormal = cross(w_normal, w_tangent);
        out_vert.texCoord = uv;

        calcLighting(out_vert);

        In = out_vert;
    }
`

function init() {
    initConsts();

    setupRenderTarget();

    addNavListeners();
}

function setupRenderTarget() {

    if ( target ) target.dispose();

    const format = parseFloat( params.format );
    const type = parseFloat( params.type );

    target = new THREE.WebGLRenderTarget( 512, 512 );
    target.stencilBuffer = ( format === THREE.DepthStencilFormat ) ? true : false;
    target.depthBuffer = true;
    target.depthTexture = new THREE.DepthTexture();
    target.depthTexture.format = format;
    target.depthTexture.type = type;
}

function initConsts() {
    canvas = document.getElementById("toonSceneCanvas");
    loader = new THREE.FileLoader();
    loader.setResponseType("arraybuffer");
    ddsLoader = new DDSLoader();

    scene = new THREE.Scene();

    postScene = new THREE.Scene();
    postScene.background = new THREE.Color(0x051021);

    postCamera = new THREE.PerspectiveCamera(75, 742 / 742, 0.005, 1000);
    postCamera.position.set(0, 0, 0);
    postCamera.up = new THREE.Vector3(0, 1, 0);
    //ideal full body camera position {x: 0, y: 0.1332955862416036, z: 0.15043292842149866, isVector3: true}
    postScene.add(postCamera);

    hemiLight = new THREE.HemisphereLight(0xdef5fa, 0x3c3d2f);
    hemiLight.position.set(0, .4, 0);
    postScene.add(hemiLight);

    hemiHelper = new THREE.HemisphereLightHelper(hemiLight, .01, 0xffffff);
    postScene.add(hemiHelper);

    pointLight = new THREE.PointLight(0xffffff, 1.0);
    pointLight.position.set(-0.317462, 0.138977, 0.048887);
    postScene.add(pointLight);

    camera = new THREE.PerspectiveCamera(75, 742 / 742, 0.005, 1000);
    camera.position.copy(pointLight.position);
    camera.up = new THREE.Vector3(0, 1, 0);
    scene.add(camera);

    pointHelper = new THREE.HemisphereLightHelper(pointLight, .01, 0xffffff);
    postScene.add(pointHelper);

    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(742, 742);
    renderer.setClearColor(0x051021, 1);

    axesHelper = new AxesHelper();
    postScene.add(axesHelper);

    controls = new OrbitControls(postCamera, canvas);
    //controls.enablePan = false;
    //controls.enableKeys = false;

    globalCameraState = "whole";
    focusWhole = false;
    focusHead = true;
    camNeedsReset = false;
}

function createMaterial(matInfo, ddsList, bufferGeometry, shouldRemoveLoad) {
    var shader;
    matInfo.lightPos = pointLight.position;
    matInfo.lightIntensity = pointLight.intensity;
    matInfo.lightColor = pointLight.color;
    matInfo.lightProjectionMatrix = camera.projectionMatrix;
    matInfo.lightProjectionMatrixInverse = camera.projectionMatrixInverse;
    switch (matInfo.derived) {
        case "SkinB":
            shader = new SkinB(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4], ddsList[5], ddsList[6], ddsList[7]);
            break;
        case "HairC":
            shader = new HairC(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
            break;
        case "Eye":
            shader = new Eye(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
            break;
        case "Garment":
            shader = new Garment(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
            break;
        case "GarmentScrolling":
            shader = new GarmentScrolling(matInfo, ddsList[0], ddsList[1], ddsList[2], ddsList[3], ddsList[4]);
            break;
    }
    if (shader) {
        var threeMesh = new THREE.Mesh(bufferGeometry, shader.material);
        var depthMesh = new THREE.Mesh(bufferGeometry)
        parsedGR2s.push(threeMesh);

        scene.add(depthMesh);
        //postScene.add(threeMesh);
    }
    if (shouldRemoveLoad) {
        postScene.add(plane);
        initCanvas();
    }
}

export class SkinB {
    constructor(materialInfo, diffuseMap, rotationMap, glossMap, paletteMap, paletteMaskMap, ageMap, complexionMap, facePaintMap){
        let hasComplexion, hasAge, hasFP;
        if (ageMap) {
            hasAge = true;
        }
        if (facePaintMap) {
            hasFP = true;
        }
        if (complexionMap) {
            hasComplexion = true;
        }

        //materialInfo.color.push(materialInfo.palette1[3]);

        var uniforms = {
            depthTexture: {value: null},
            lightProjectionMatrix: {value: materialInfo.lightProjectionMatrix},
            lightProjectionMatrixInverse: {value: materialInfo.lightProjectionMatrixInverse},
            lightIntensity: {value: materialInfo.lightIntensity},
            lightPos: {value: materialInfo.lightPos},
            lightColor: {value: materialInfo.lightColor},
            derived: {value: 11},
            hasDiffuse: {value: true},
            hasRotation: {value: true},
            hasGloss: {value: true},
            hasBlueGlow: {value: false},
            diffuseMapSampler: {value: diffuseMap},
            rotationMap1Sampler: {value: rotationMap},
            glossMapSampler: {value: glossMap},
            hasCompl: {value: hasComplexion},
            hasFacepaint: {value: hasFP},
            hasAge: {value: hasAge},
            complexionSampler: {value: complexionMap},
            facepaintSampler: {value: facePaintMap},
            ageSampler: {value: ageMap},
            hasPalette: {value: true},
            hasPaletteMask: {value: true},
            paletteMapSampler: {value: paletteMap},
            paletteMaskMapSampler: {value: paletteMaskMap},
            palette1: {value: materialInfo.palette1},
            palette2: {value: materialInfo.palette2},
            palette1Specular: {value: materialInfo.palette1Specular},
            palette2Specular: {value: materialInfo.palette2Specular},
            palette1MetallicSpecular: {value: materialInfo.palette1MetallicSpecular},
            palette2MetallicSpecular: {value: materialInfo.palette2MetallicSpecular},
            fleshBrightness: {value: materialInfo.fleshBrightness},
            flushTone: {value: materialInfo.flush},
            hasAnimatedTexture1: {value: false},
            animatedTexture1Sampler: {value: null},
            hasAnimatedTexture2: {value: null},
            animatedTexture2Sampler: {value: null},
            hasFresnelGradient: {value: null},
            fresnelGradientSampler: {value: null},
            animTexTint0: {value: null},
            animTexTint1: {value: null},
            animTexTint2: {value: null},
            animFresnelHue0: {value: null},
            animFresnelHue1: {value: null}
        };

        this.material = new THREE.ShaderMaterial( {
            uniforms: uniforms,
            vertexShader: vertShaderText,
            fragmentShader: skinBFrag
        } );
    }
}

export async function displayCharacter(CharacterValues){
    clearObjFromScene();
    parsedGR2s = [];
    customObjectList = [];
    var skinMatsDataIDX = CharacterValues.findIndex((val) => val.slotName == "skinMats");
    var skinMatsData = CharacterValues[skinMatsDataIDX];
    CharacterValues.splice(skinMatsDataIDX, 1);

    const NUM_MODELS = CharacterValues.length;
    let curModelIdx = 1;

    CharacterValues.forEach((e) => {
        var gr2s = e.modelPaths;
        var matInfo = e.materialInfo;
        var bufferGeometries = [];
        var secondaries = [];

        for (let i = 0; i < gr2s.length; i++){
            var gr2 = gr2s[i];

            loader.load(
                // resource URL
                gr2,

                // onLoad callback
                function (data) {
                    // output the text to the console
                    var parsedCustomObj = loadGR2(data, gr2, e.slotName);
                    parsedCustomObj.threeGeometries.forEach((elem) => {
                        if (elem.pieceOne) {
                            bufferGeometries.push(elem.pieceOne);
                            secondaries.push(elem.pieceTwo);
                        } else {
                            bufferGeometries.push(elem);
                        }
                    })
                    customObjectList.push(parsedCustomObj);
                    if (i + 1 == gr2s.length) {
                        var combinedGeometry = BufferGeometryUtils.mergeBufferGeometries(bufferGeometries, false);
                        loadMaterial(matInfo, combinedGeometry, ((secondaries.length == 0) && (curModelIdx == NUM_MODELS)));

                        if (secondaries.length != 0) {
                            var combinedSecondaries = BufferGeometryUtils.mergeBufferGeometries(secondaries, false);
                            if (matInfo.slotName == "head") {
                                loadMaterial(matInfo.eyeMatInfo, combinedSecondaries, (curModelIdx == NUM_MODELS));
                            } else {
                                var mat = getMatFromString(skinMatsData, matInfo.slotName);
                                loadMaterial(mat, combinedSecondaries, (curModelIdx == NUM_MODELS));
                            }
                        }
                        curModelIdx++;
                    }
                },

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

                // onError callback
                function (err) {
                    showSnackBar(err);
                }
            );
        }

        if (gr2s.length == 0) {
            curModelIdx++;
        }
    });
}

function loadGR2(buffer, path, slotName){
    //.. code to load GR2 models is here
}

//load Materials
function loadMaterial(matInfo, bufferGeometry, shouldRemoveLoad) {
    var ddsTextures = [];
    var length = matInfo.listOfMaps.length;
    for (let i = 0; i < matInfo.listOfMaps.length; i++) {
        var path = matInfo.listOfMaps[i];
        if (path) {
            if (path.substring(path.length - 4) != ".dds") {
                path = path + ".dds";
            }
            ddsLoader.load(
                 path,

                function (tex) {
                    ddsTextures.push({
                        index: i,
                        texture: tex
                    });
                    if (ddsTextures.length == length) {
                        var arrangedTextures = fixOrder(ddsTextures);
                        createMaterial(matInfo, arrangedTextures, bufferGeometry, shouldRemoveLoad);
                    }
                },

                function (onProgress) {

                },

                function (error) {
                    showSnackBar(error);
                }
            );
        } else {
            length--;
        }
    }
}
function fixOrder(textureObjList) {
    var toRe = [];
    var sortedList = textureObjList.sort((a, b) => {
        return a.index - b.index;
    });
    sortedList.forEach((obj) => {
        toRe.push(obj.texture);
    });
    return toRe;
}

//functions
function clearObjFromScene() {
    parsedGR2s.forEach((object) => {
        postScene.remove(object);
        object.geometry.dispose();
        if (object.material) {
            object.material.dispose();
            object.material = undefined;
        }
    });
}

function initCanvas() {
    modelCanvasContainer.style.display = "flex";
    loaderContainer.style.display = "none";
    animate();
}

//animation funcs
function animate() {
    renderer.clear(true, true, true);
    requestAnimationFrame(animate);

    // render scene into target
    renderer.setRenderTarget( target );
    renderer.render( scene, camera );

    plane.material.depthMap = target.depthTexture;

    // render post FX
    parsedGR2s.forEach((elem) => {
        elem.material.uniforms.depthTexture.value = target.depthTexture;
    });

    renderer.setRenderTarget( null );
    renderer.render( postScene, postCamera );

    update();
}

if (WEBGL.isWebGLAvailable()) {

    // Initiate function or other initializations here
    init();

} else {

    const warning = WEBGL.getWebGLErrorMessage();
    showSnackBar(warning);

}