/**
 * Start animated heading widget script
 */

;
(function ($, elementor) {

    'use strict';

    var widgetAnimatedHeading = function ($scope, $) {

        var $heading = $scope.find('.bdt-heading > *'),
            $_heading = $scope.find('.bdt-heading'),
            $settings = $_heading.data('settings'),
            $animatedHeading = $heading.find('.bdt-animated-heading'),
            $settings = $animatedHeading.data('settings');

        if (!$heading.length) {
            return;
        }

        if (!$settings) {
            console.warn('BDT Animated Heading: No settings found');
            return;
        }

        function kill() {
            var splitTextTimeline = gsap.timeline(),
                mySplitText = new SplitText($quote, {
                    type: "chars, words, lines"
                });
            splitTextTimeline.clear().time(0);
            mySplitText.revert();
        }

        if ($settings.layout === 'animated') {
            $_heading.css('display', 'block'); // Fix full list on first loading
                $($animatedHeading).Morphext($settings);
        } else if ($settings.layout === 'typed') {
            var animateSelector = $($animatedHeading).attr('id');
            var typed = new Typed('#' + animateSelector, $settings);
        } else if ($settings.layout === 'split_text') {

            var $quote = $($heading);

            var splitTextTimeline = gsap.timeline(),
                mySplitText = new SplitText($quote, {
                    type: "chars, words, lines"
                });


            gsap.set($quote, {
                perspective: $settings.anim_perspective //400
            });
            
            kill();

            mySplitText.split({
                type: 'chars, words, lines'
            });
            var stringType = '';
            if ('lines' == $settings.animation_on) {
                stringType = mySplitText.lines;
            } else if ('chars' == $settings.animation_on) {
                stringType = mySplitText.chars;
            } else {
                stringType = mySplitText.words;
            }
            var animationConfig = {
                opacity: 0, //0
                scale: $settings.anim_scale, //0
                y: $settings.anim_rotation_y, //80
                rotationX: $settings.anim_rotation_x, //180
                transformOrigin: $settings.anim_transform_origin, //0% 50% -50  
            };

            if ($settings.anim_repeat) {
                animationConfig.repeat = -1; // Infinite repeat
                if ($settings.anim_yoyo) {
                    animationConfig.yoyo = true; // Makes animation reverse on repeat
                }
            }

            splitTextTimeline.staggerFrom(stringType, 0.5, animationConfig, $settings.anim_duration);


        } else if ($settings.layout === 'gsap_slide') {
            // GSAP Slide Layout - Gradient Mask Reveal Effect
            console.log('BDT Animated Heading: GSAP Slide activated', $settings);
            
            var $mask = $_heading.find('.bdt-gsap-mask');
            
            // Get background color - use custom color if set, otherwise detect from container
            var bgColor = $settings.gsap_slide_mask_color || '';
            
            if (!bgColor) {
                // Try to get from section background
                var $section = $_heading.closest('.elementor-section');
                if ($section.length) {
                    bgColor = $section.css('background-color');
                }
                
                // Fallback to heading container
                if (!bgColor || bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
                    bgColor = $_heading.css('background-color');
                }
                
                // Final fallback to body or default
                if (!bgColor || bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
                    bgColor = $('body').css('background-color') || '#262626';
                }
            }

            // Setup gradient mask overlay
            if ($mask.length) {
                $mask.css({
                    'position': 'absolute',
                    'top': '0',
                    'left': '100%',
                    'width': '200%',
                    'height': '100%',
                    'max-width': 'none',
                    'background-image': 'linear-gradient(to right, transparent, ' + bgColor + ' 50%, ' + bgColor + ')',
                    'pointer-events': 'none'
                });

                // GSAP Slide Animation Effect on the mask
                var slideConfig = {
                    xPercent: typeof $settings.gsap_slide_xpercent !== 'undefined' ? $settings.gsap_slide_xpercent : -100,
                    duration: typeof $settings.gsap_slide_duration !== 'undefined' ? $settings.gsap_slide_duration : 3,
                    repeat: -1,
                    repeatDelay: typeof $settings.gsap_slide_repeat_delay !== 'undefined' ? $settings.gsap_slide_repeat_delay : 0.5,
                    ease: "none"
                };

                if ($settings.gsap_slide_yoyo) {
                    slideConfig.yoyo = true;
                }

                console.log('BDT Animated Heading: GSAP config', slideConfig);

                // Apply animation to the mask, not the text
                gsap.to($mask, slideConfig);
            } else {
                console.warn('BDT Animated Heading: Mask element not found for GSAP Slide');
            }
        }

        $($heading).animate({
            easing: 'slow',
            opacity: 1,
        }, 500);


    };


    jQuery(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/bdt-animated-heading.default', widgetAnimatedHeading);
    });

}(jQuery, window.elementorFrontend));

/**
 * End animated heading widget script
 */