{% assign content_type = content_type | default: 'awdawd' %}

{% if content_type == 'init' %}

  <script type="text/javascript">
        // create new html tag called "shx-drehteller"

        class DrehTellerElement extends HTMLElement {
            constructor() {
                super();
                // element functionality written in here
                this.currentVariant = null;

                this.video_wrapper_Clones = {};
            }

            connectedCallback() {
                this.innerHTML = "";
            }

            initCurrentVariant(id) {
                this.currentVariant = id;

                // edit inner html
                this.reloadCurrentVariant(id, true);
            }

            disconnectedCallback() {
                // Clean up the element when it is removed from the DOM.
            }

            reloadCurrentVariant(id, openAnimation = false) {
                this.currentVariant = id;

                // edit inner html
                this.innerHTML = "";

                document.querySelectorAll('[thumbnail-alt-mobile]').forEach((thumbnail) => {
                    //console.log(thumbnail.getAttribute('thumbnail-alt-mobile'));
                    if (thumbnail.getAttribute('thumbnail-alt-mobile') === "__" + this.currentVariant) {
                        let videoWrapper = thumbnail.querySelector('.shx-video');
                        
                        if (videoWrapper) {

                            // clone video to shadow dom
                            let videoWrapperClone = null;
                            if (this.video_wrapper_Clones[this.currentVariant]) {
                                videoWrapperClone = this.video_wrapper_Clones[this.currentVariant];
                            } else {
                                videoWrapperClone = videoWrapper.cloneNode(true);
                                this.video_wrapper_Clones[this.currentVariant] = videoWrapperClone;

                            
                                videoWrapperClone.classList.add('shx-video-for-desc');

                                // get video element
                                let videoElement = videoWrapperClone.querySelector('video');
                                // move video element out of his parent
                                videoWrapperClone.appendChild(videoElement); 


                                // delete shx-video__wrapper element
                                videoWrapperClone.querySelector('.shx-video__wrapper').remove();
                            }                            

                            this.appendChild(videoWrapperClone);      


                            let videoElement = videoWrapperClone.querySelector('video');
                            

                            // pause all video
                            Object.keys(this.video_wrapper_Clones).forEach((key) => {
                                if (key !== this.currentVariant) {
                                    this.video_wrapper_Clones[key].querySelector('video').pause();
                                }
                            }); 

                            videoElement.play();

                            if(openAnimation) {
                                // calculate of videoWrapperClone height
                                let height = videoWrapperClone.offsetHeight;

                                videoWrapperClone.style.height = '0px';

                                function animate() {
                                    anime({
                                        targets: videoWrapperClone,
                                        height: height,
                                        duration: 500,
                                        easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
                                        complete: function() {
                                            videoWrapperClone.style.height = 'auto';
                                        }
                                    });

                                }

                                //animejs fade in
                                //dom ready
                                
                                if (document.getElementById('animejs-script').readyState === 'complete' || document.getElementById('animejs-script').readyState === 'loaded'){
                                    animate();                                    
                                } else { 
                                    document.getElementById('animejs-script').addEventListener('load', function() {
                                        animate();
                                    });
                                }   
                            } else {
                                videoWrapperClone.style.opacity = 0;
                                anime({
                                        targets: videoWrapperClone,
                                        opacity: 1,
                                        duration: 500,
                                        easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
                                    });
                            }
                        }                        
                    } 

                }
                );
            }

            
        }

        class CustomVariantDescriptionElement extends HTMLElement {
            constructor() {
                super();

                // "variant" is the id of the variant
                this.variant = null;
                this.currentVariant = null;
            }

            initVariantDescription(id) {
                this.currentVariant = id;

                // edit inner html
                this.updateVariantDescription(id);
            }

            connectedCallback() {                
                this.style.display = 'none';
                // "variant" is the id of the variant
                this.variant = this.getAttribute('variant');
            }

            disconnectedCallback() {
                // Clean up the element when it is removed from the DOM.
            }

            updateVariantDescription(id) {
                this.currentVariant = id;

                //console.log(this.variant, this.currentVariant);
                if(this.variant === this.currentVariant) {
                    this.style.display = 'block';
                } else {
                    this.style.display = 'none';
                }
            }

            
        }
        
        customElements.define('shx-drehteller', DrehTellerElement);
        customElements.define('shx-variant-description', CustomVariantDescriptionElement);
  </script>


{% endif %}