/******************************************************************************
 *   ______                                                                   *
 *  /       \                                                                 *
 * /$$$$$$  | ________  __    __   ______    ______                           *
 * $$ |__$$ |/        |/  |  /  | /      \  /      \                          *
 * $$    $$ |$$$$$$$$/ $$ |  $$ |/$$$$$$  |/$$$$$$  |                         *
 * $$$$$$$$ |  /  $$/  $$ |  $$ |$$ |  $$/ $$    $$ |                         *
 * $$ |  $$ | /$$$$/__ $$ \__$$ |$$ |      $$$$$$$$/                          *
 * $$ |  $$ |/$$      |$$    $$/ $$ |      $$       |                         *
 * $$/   $$/ $$$$$$$$/  $$$$$$/  $$/        $$$$$$$/                          *
 *                                                                            *
 * @PROJECT    : 3D Preview Extension [Magetop.com]                           *
 * @AUTHOR     : Azure - Developer                                            *
 * @COPYRIGHT  : © 2019  Magetop.com                                          *
 * @LINK       : https://Magetop.com                                          *
 * @CREATED    :  10/01/2022                                                  *
 ******************************************************************************/

define([
    'jquery',
    'Magento_Ui/js/modal/confirm',
    'Magento_Ui/js/modal/modal',
    'Magento_Ui/js/modal/alert',
    'mgt_advance_preview_helper',
    'threejs',
    'gltfloader',
    'OrbitControls',
],function ($,confirmation,modal,alert,helper,THREE) {
    var productPreviewPro = {};
    productPreviewPro = {
        version: '2.5',
        productPreviewImage: function (filePreview, zoomNumber, lightNumber,previewElementId) {
            var scene = new THREE.Scene();
            // console.log(THREE.REVISION);
            var testSacle = window.innerWidth / window.innerHeight;

            // console.log(testSacle);
            const container = document.querySelector('#'+previewElementId);
            console.log(container.clientWidth, container.clientHeight);
            var customWinDownW =  container.clientWidth || 300;
            var customWinDownH =  600;
            var camera = new THREE.PerspectiveCamera(75, customWinDownW / customWinDownW, 0.1, 1000);
            camera.zoom = 5
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(customWinDownW, customWinDownW);
            document.getElementById(previewElementId).appendChild(renderer.domElement);
            //
            /* because when resize browser, no thing re-render => make your scene not resiz after resize browser
                So, after render dom Element, we need to watch the change of viewport
            */
            window.addEventListener('resize', function() {
                var width = 600; //window.innerWidth;
                var height = 600; //window.innerHeight;
                // console.log("resize W", window.innerWidth);
                // console.log("resize H", window.innerHeight);
                renderer.setSize(width, height);
                camera.aspect = width / height;
                camera.updateProjectionMatrix();
            });
           /* camera.position.z = 10;
            camera.position.y = 40;
            camera.position.x = -3;*/
            camera.position.z = 28.2
            camera.position.y = 1.3;
            camera.position.x = 0.2;
            document.addEventListener('mousemove', onDocumentMouseMove, false);
            var loader = new THREE.GLTFLoader();
            loader.load( '/media/advancepreview/custom_previews/' + filePreview, function (gltf) {

                var modelgl = gltf.scene;

                modelgl.scale.set(zoomNumber,zoomNumber,zoomNumber)

                // console.log(modelgl);

                scene.add(modelgl);

            } );
            var light = new THREE.HemisphereLight( 0xffffff, 0xffffff, lightNumber );
            scene.add( light );

            //game login
            var update = function() {};

            // draw scene
            var render = function() {
                renderer.render(scene, camera);
            };

            //run gameloop (update, render, repeat)
            var GameLoop = function() {
                requestAnimationFrame(GameLoop);
                update();
                render();
                controls.update();
            };

            // for Trackball
            controls = new THREE.OrbitControls(camera, renderer.domElement);


            GameLoop();

            scene.background = new THREE.Color( 'white' );
            function onDocumentMouseMove(event) {
                event.preventDefault();
                // mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                // mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                // console.log("mose",camera.position);
            }

        }
    }
    return productPreviewPro;
})
