var modelAndTextures = document.getElementById('modelPlusTexture');

modelAndTextures?.addEventListener('change', function (event) {

    var files = event.currentTarget.files;
    loadFiles(files);

});

//LOAD AND ADD TO SCENE -> .OBJ, .MTL, .DAE AND ASSOCIATED IMAGE FILES
var loadFiles = function (files) {

    var obj_path, mtl_path, dae_path, gltf_path, fbx_path;;
    var loadingObj = false, loadingDae = false, loadingGLTF = false, loadingFBX = false;
      
    var extraFiles = {}, file, imageFiles = [], image;
    for (var i = 0; i < files.length; i++) {
        file = files[i];
        extraFiles[file.name] = file;    

        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log(files[i]);
        console.log("Size: " + files[i].size + " bytes");

        //Filenames that end in .obj/.OBJ or .mtl/.MTL
        if (files[i].name.match(/\w*.obj\b/i)) {

            obj_path = files[i].name;
           // loadingDae = false;
            loadingObj = true;

            scene.remove(sample_model);
            removeModel();
            modelLoaded = true;
            console.log(obj_path);
        }

        if (files[i].name.match(/\w*.mtl\b/i)) {

            mtl_path = files[i].name;
            console.log(mtl_path);
        }

        if (files[i].name.match(/\w*.dae\b/i)) {

            dae_path = files[i].name;
           // loadingObj = false;
            loadingDae = true;

            scene.remove(sample_model);
            removeModel();
            modelLoaded = true;
            console.log(dae_path);
        }
        
         if (files[i].name.match(/\w*.gltf\b/i)) {

            gltf_path = files[i].name;
            loadingGLTF = true;

            scene.remove(sample_model);
            removeModel();
            modelLoaded = true;
            console.log(gltf_path);
        }

        if (files[i].name.match(/\w*.fbx\b/i)) {

            fbx_path = files[i].name;
            loadingFBX = true;

            scene.remove(sample_model);
            removeModel();
            modelLoaded = true;
            console.log(fbx_path);
        }

    }

    manager.setURLModifier(function (url, path) {

        url = url.replace('data:application/', '');
        url = url.split(/[\/\\]/);
        url = url[url.length - 1];

        if (extraFiles[url] !== undefined) {

            const blobURL = URL.createObjectURL(extraFiles[url]);
            return blobURL;
        }

        return url;
    });

     if (loadingGLTF) {

        var gltf_loader = new THREE.GLTFLoader(manager);
        gltf_loader.load(gltf_path, function (gltf) {

            console.log(gltf);
            model = gltf.scene;
            modelWithTextures = true;
            console.log(model);

            //clone and animations
           // var clone = AnimationUtils.clone(model);
            var anims = gltf.animations;

            console.log(anims);
            addAnimation( model, anims );
            animControl( model );
            playAllAnimation(anims);

            model.traverse(function (child) {

                if (child.isMesh) {

                    if (child.material.length > 1) {
                        for (var i = 0; i < child.material.length; i++) {

                            child.material[i].side = THREE.DoubleSide;                         
                        }
                    } else {
                        child.material.side = THREE.DoubleSide;
                    }

                    console.log(child);

                    console.log(child.material.map);

                    numOfMeshes++;
                    var geometry = child.geometry;
                    stats(gltf_path, geometry, numOfMeshes);

                    var wireframe2 = new THREE.WireframeGeometry(geometry);
                    var edges = new THREE.LineSegments(wireframe2, materials.wireframeAndModel);
                    materials.wireframeAndModel.visible = false;
                    child.add(edges);

                    setWireFrame(child);
                    setWireframeAndModel(child);
                   
                    var originalMaterial = child.material;
                    setPhong(child, originalMaterial);
                    setXray(child, originalMaterial);
                
                }

            });
       
            setCamera(model);
            smooth.disabled = true;
            document.getElementById('smooth-model').innerHTML = "Smooth Model (Disabled)";

            setBoundBox(model);
            setPolarGrid(model);
            setGrid(model);
            setAxis(model);

            scaleUp(model); 
            scaleDown(model);

            fixRotation(model);
            resetRotation(model);

            model.position.set(0, 0, 0);

            selectedObject = model;
            outlinePass.selectedObjects = [selectedObject];
            outlinePass.enabled = false;

            scene.add(model);
        });
       
    }

    if (loadingFBX) {

        var fbx_loader = new THREE.FBXLoader(manager);
        fbx_loader.load(fbx_path, function (fbx) {

            console.log(fbx);
            model = fbx;
            modelWithTextures = true;
            console.log(model);
        
            var anims = fbx.animations;
            addAnimation( model, anims );
            animControl( model );
            playAllAnimation(anims);
            
            model.traverse(function (child) {

                if (child.isMesh) {

                    if (child.material.length > 1) {
                        for (var i = 0; i < child.material.length; i++) {

                            child.material[i].side = THREE.DoubleSide;
                        }
                    } else {
                        child.material.side = THREE.DoubleSide;
                    }

                    console.log(child);

                    numOfMeshes++;
                    var geometry = child.geometry;
                    stats(fbx_path, geometry, numOfMeshes);

                    var wireframe2 = new THREE.WireframeGeometry(geometry);
                    var edges = new THREE.LineSegments(wireframe2, materials.wireframeAndModel);
                    materials.wireframeAndModel.visible = false;
                    child.add(edges);

                    setWireFrame(child);
                    setWireframeAndModel(child);

                    var originalMaterial = child.material;
                    setPhong(child, originalMaterial);
                    setXray(child, originalMaterial);
                }

            });

            setCamera(model);
            smooth.disabled = true;
            document.getElementById('smooth-model').innerHTML = "Smooth Model (Disabled)";  

            setBoundBox(model);
            setPolarGrid(model);
            setGrid(model);
            setAxis(model);

            scaleUp(model); scaleDown(model);

            fixRotation(model);
            resetRotation(model);

            model.position.set(0, 0, 0);

            selectedObject = model;
            outlinePass.selectedObjects = [selectedObject];
            outlinePass.enabled = false;

            scene.add(model);
        });
    }
    
    if (loadingDae) {
        var collada_loader = new THREE.ColladaLoader(manager);
        collada_loader.load(dae_path, function (collada) {

            model = collada.scene;
            modelWithTextures = true;

            var anims = collada.animations
            addAnimation( model, anims );
            animControl( model );
            playAllAnimation(anims);
            
            console.log(model);

            model.traverse(function (child) {

                if (child.isMesh) {
                    
                    if (child.material.length > 1) {
                        for (var i = 0; i < child.material.length; i++) {

                            child.material[i].side = THREE.DoubleSide;
                            //child.material[i].skinning = false;
                        }
                    }
                    else {
                        child.material.side = THREE.DoubleSide;
                       // child.material.skinning = false;
                    }


                    numOfMeshes++;
                    var geometry = child.geometry;
                    stats(dae_path, geometry, numOfMeshes);

                    var wireframe2 = new THREE.WireframeGeometry(child.geometry);
                    var edges = new THREE.LineSegments(wireframe2, materials.wireframeAndModel);
                    materials.wireframeAndModel.visible = false;

                    model.rotation.set(0, 0, 0);

                    
                    setWireFrame(child);
                    setWireframeAndModel(child);
                    
                    var originalMaterial = child.material;
                    setXray(child, originalMaterial);
                    setPhong(child, originalMaterial);
                    
                    setBoundBox(child);
                    setGrid(child);
                    setPolarGrid(child);
                    setAxis(child);
                    
                    smooth.disabled = true;
                    document.getElementById('smooth-model').innerHTML = "Smooth Model (Disabled)";
                }

            });

            model.position.set(0, 0, 0);

            setCamera(model);
            scaleUp(model); scaleDown(model);

            fixRotation(model);
            resetRotation(model);

            selectedObject = model;
            outlinePass.selectedObjects = [selectedObject];
            outlinePass.enabled = false;

            scene.add(model);
        });
    }

    if (loadingObj) {
        var mtlloader = new THREE.MTLLoader(manager);
        mtlloader.load(mtl_path, function (materials_load) {
            var loader = new THREE.OBJLoader(manager);
            loader.setMaterials(materials_load);
            loader.load(obj_path, function (obj) {

                model = obj;
                modelWithTextures = true;

                model.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {

                        if (child.material) {
                            child.material.side = THREE.DoubleSide;
                        }

                        numOfMeshes++;
                        var geometry = child.geometry;
                        stats(obj_path, geometry, numOfMeshes);
          
                        var wireframe2 = new THREE.WireframeGeometry(child.geometry);
                        var edges = new THREE.LineSegments(wireframe2, materials.wireframeAndModel);
                        materials.wireframeAndModel.visible = false;
                        model.add(edges);

                        setWireFrame(child);
                        setWireframeAndModel(child);
                        
                        var originalMaterial = child.material;
                        setXray(child, originalMaterial);
                        setPhong(child, originalMaterial);                

                    }
                });

                setCamera(model);
                setSmooth(model);

                model.position.set(0, 0, 0);

                setBoundBox(model);
                setPolarGrid(model);
                setGrid(model);
                setAxis(model);

                scaleUp(model);
                scaleDown(model);

                fixRotation(model);
                resetRotation(model);

                selectedObject = model;
                outlinePass.selectedObjects = [selectedObject];
                outlinePass.enabled = false;

                scene.add(model);
            });
        });
    }
};