<?php $themeSettingConfig = $this->helper('MGS\ThemeSettings\Helper\Config')?>

<?php /* Back To Top */ ?>
<?php $backToTop = $themeSettingConfig->getStoreConfig('themesettings/general/back_to_top') ?>

<?php if ($backToTop): ?>
    <a href="#" class="scroll-to-top"><i class="fa fa-arrow-up"></i></a>

    <script>
       (function(){
            // Nhamdv. Back to top
            const btn = document.querySelector( '.scroll-to-top' );

            if ( ! btn) {
                return;
            }

            window.addEventListener( 'scroll', function( e ) {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                if ( scrollTop > 100 ) {
                    // If is mobile device bottom 55px else bottom 25px
                    if (window.innerWidth < 768) {
                        btn.style.right=  15 + 'px';
                    } else {
                        btn.style.right=  35 + 'px';
                    }
                    btn.style.opacity= 1;
                } else {
                    btn.style.right= -45 + 'px';
                    btn.style.opacity= 0;
                }
            } );

            const scrollToTop = () => {
                const c = document.documentElement.scrollTop || document.body.scrollTop;

                if ( c > 0 ) {
                    window.requestAnimationFrame( scrollToTop );
                    window.scrollTo( 0, c - c / 8 );
                }
            }

            btn.addEventListener( 'click', function( e ) {
                e.preventDefault();
                scrollToTop();
            });
        })();
    </script>
<?php endif; ?>

<?php /* Lazy Load */ ?>
<?php $lazyLoad = $themeSettingConfig->getStoreConfig('themesettings/general/lazy_load') ?>
<?php if ($lazyLoad): ?>
    <script>
        window.lazySizesConfig = window.lazySizesConfig || {};
        window.lazySizesConfig.lazyClass = 'arrow-lazy';
        window.lazySizesConfig.loadingClass = 'arrow-lazyloading';
        window.lazySizesConfig.loadedClass = 'arrow-lazyloaded';

        // if lazyloaded add class to parent
        document.addEventListener('lazyloaded', function (e) {
            // Closest parent: .product-top, .product-image, .thumbnail-post, .promobanner, .instagram-item
            e.target.closest('.product-top, .product-image, .thumbnail-post, .promobanner, .instagram-item').classList.add('arrow-parent-lazyloaded');
        });

        require(['mLazysizes']);
    </script>
<?php endif ?>
