<?php
/** @var \Magetop\Advancepreview\Block\PreviewPro $block */
$baseUrl = $block->getBaseUrl();
$mediaUrl = $block->getMediaUrl();
?>
<div id="preview-three-loading">
    <img style="" alt="<?php echo __('Please wait....'); ?>" src="<?php echo $block->getViewFileUrl('images/loader-1.gif'); ?>">
</div>

<div id="magetop-preview-contenter">

</div>
<?php
// get value
$modelPreview = $block->getRequest()->getParam('model_preview','');
$namePreview = $block->getRequest()->getParam('name_preview','');
$productId = $block->getRequest()->getParam('product_id',0);
?>
<input type="hidden" id="txt-mgt-model-preview" value="<?php echo $modelPreview; ?>">
<input type="hidden" id="txt-mgt-name-preview" value="<?php echo $namePreview; ?>">
<input type="hidden" id="txt-mgt-media-url" value="<?php echo $mediaUrl; ?>">
<input type="hidden" id="txt-mgt-product-id" value="<?php echo $productId; ?>">
<script async src="<?php echo $baseUrl; ?>test3d/build/es-module-shims.js"></script>
<input type="hidden" id="txt-preview-3d-loader" value="0">
<script type="importmap">
        {
            "imports": {
            "three": "<?php echo $baseUrl; ?>test3d/build/three.module.js"
            }
        }
        </script>

<script  type="module">
    import * as THREE from 'three';
    import { OrbitControls } from '<?php echo $baseUrl; ?>test3d/jsm/controls/OrbitControls.js';
    import { GLTFLoader } from '<?php echo $baseUrl; ?>test3d/jsm/loaders/GLTFLoader.js';
    import { RoomEnvironment } from '<?php echo $baseUrl; ?>test3d/jsm/environments/RoomEnvironment.js';

    //import { GUI } from '<?php echo $baseUrl; ?>/test3d/jsm/libs/lil-gui.module.min.js';

    let camera, scene, renderer, controls;

    init();
    animate();

    function init() {

        // test value
        var modelPreview = document.getElementById('txt-mgt-model-preview').value;
        var namePreview = document.getElementById('txt-mgt-name-preview').value;
        const mediaUrl = document.getElementById('txt-mgt-media-url').value;
        const productId = document.getElementById('txt-mgt-product-id').value;
        // console.log(namePreview);
        //const container = document.createElement( 'div' );

        //const container = document.getElementByID( 'ong-noi-uoc' );
        const previewElementId = 'magetop-preview-contenter';
        document.querySelector('#'+previewElementId);
        //document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
        //camera.position.set( - 0.75, 0.7, 1.25 );
        camera.position.set( - -0.06991416131245831, 0.2254890792448175, 1.4923501736055929 );

        scene = new THREE.Scene();

        // model
        // demo1 mfm_2.gltf
        var previewPath = mediaUrl + 'advancepreview/custom_previews/product_id_'+productId+'/'+modelPreview+'/';
        console.log("Preview Path ", previewPath);
        new GLTFLoader()
            .setPath( previewPath)
            .load( namePreview, function ( gltf ) {

                scene.add( gltf.scene );

                //const object = gltf.scene.getObjectByName( 'SheenChair_fabric' );

                //const gui = new GUI();

                //gui.add( object.material, 'sheen', 0, 1 );
                //gui.open();
                console.log("3d 1");
                document.getElementById("preview-three-loading").style.display = "none";
                document.getElementById("txt-preview-3d-loader").value = 1;


            } );

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        renderer.outputEncoding = THREE.sRGBEncoding;
        //container.appendChild( renderer.domElement );
        document.getElementById(previewElementId).appendChild( renderer.domElement )

        const environment = new RoomEnvironment();
        const pmremGenerator = new THREE.PMREMGenerator( renderer );

        scene.background = new THREE.Color( 0xffffff );
        scene.environment = pmremGenerator.fromScene( environment ).texture;

        controls = new OrbitControls( camera, renderer.domElement );
        controls.enableDamping = true;
        controls.minDistance = 1;
        controls.maxDistance = 10;
        //controls.target.set( 0, 0.35, 0 );
        controls.update();

        window.addEventListener( 'resize', onWindowResize );

    }

    function onWindowResize() {

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

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

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        controls.update(); // required if damping enabled

        render();
        //console.log(camera.position);

    }

    function render() {

        renderer.render( scene, camera );

    }

</script>
