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

/** @var \Magetop\Advancepreview\Block\CustomProduct $block */
$urls = $block->getPreviewAjaxUrls();
$extraPrice = $urls['extra_price'];
$uploadCustomDesign = $urls['upload_custom_design'];
$customDiscountUrl = $urls['custom_discount_url'];
$tierPriceUrl = $urls['custom_tierprice_url'];
$customerGroup = $block->getCustomerGroup();
$_product = $block->getPreviewProductData();
$is3D = $_product->getData('pcto_is_3d');;
?>
<!--hidden url-->
<input type="hidden" id="txt-preview-url-extra-price" value="<?php echo $extraPrice; ?>">
<input type="hidden" id="txt-customer-group" value="<?php echo $customerGroup ?>">
<input type="hidden" id="txt-is-3d" value="<?php echo $is3D ?>">
<input type="hidden" id="txt-upload-custom-url" value="<?php echo $uploadCustomDesign ?>">
<input type="hidden" id="txt-custom-discount-url" value="<?php echo $customDiscountUrl ?>">
<input type="hidden" id="txt-custom-tierprice-url" value="<?php echo $tierPriceUrl ?>">
<script>
    require([
        'jquery',
        'mgt_advance_preview_helper',
        'mgt_product_preview'
    ],function ($, helper, productPreview) {
        productPreview.init();
    })
</script>
<?php if($is3D == 1) : ?>
<script>

    require([
        'jquery',
        'threejs',
        'gltfloader',
         'OrbitControls'
    ],function ($,THREE) {
        var three3D = {
            version: '2.5',
            init3DModel(filePreview) {
                var scene = new THREE.Scene();
                // console.log(THREE.REVISION);
                var testSacle = window.innerWidth / window.innerHeight;
                var customWinDownW =  600;
                var customWinDownH =  600;
                // console.log(testSacle);
                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('demo-3d-test').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;

                var loader = new THREE.GLTFLoader();
                //product_id_10/scene.gltf
                loader.load(
                    //model here
                    '/media/advancepreview/custom_previews/' + filePreview,
                    (gltf) => {
                        //
                        var root = gltf.scene;
                        root.scale.x = 0.3;
                        root.scale.y = 0.3;
                        root.scale.z = 0.3;

                        console.log(root);
                        scene.add(root);
                    }
                );

                var light = new THREE.DirectionalLight( 0xffffff );
                light.position.set(5, 50, 10);
                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' );
            },
            initData : function() {

            },
            init: function () {
                var self = this;
                self.init3DModel('product_id_10/scene.gltf');
                console.log("load 3d here");
                $('.btn-preview-standard-model-item').click(function () {
                    var previewId = $(this).attr('three-id');
                    var model = 'product_id_10/model-'+previewId+'/scene.gltf';
                    console.log(model);
                    $('#demo-3d-test').html('');

                    self.init3DModel(model);
                })
            },
        }
        three3D.init();

    })
</script>
<?php endif; ?>
