"use strict";

(function ($) {
  "use strict";

  var StickyPinElement = elementorModules.frontend.handlers.Base.extend({
    scrollTrigger: null,
    _toggleClass: '',
    getResponsiveSetting: function getResponsiveSetting(settings, key) {
      var deviceMode = elementorFrontend.getCurrentDeviceMode();
      if (deviceMode !== 'desktop') {
        var deviceKey = key + '_' + deviceMode;
        if (settings[deviceKey] !== undefined && settings[deviceKey] !== '') {
          return settings[deviceKey];
        }
      }
      return settings[key];
    },
    onInit: function onInit() {
      if (typeof gsap === "undefined") return;
      if (typeof ScrollTrigger === "undefined") {
        console.warn("ScrollTrigger not loaded");
        return;
      }

      // disable support for isEdit 
      if (elementorFrontend.isEditMode()) {
        return;
      }
      gsap.registerPlugin(ScrollTrigger);
      elementorModules.frontend.handlers.Base.prototype.onInit.apply(this, arguments);
      this.initStickyPin();
    },
    onElementChange: function onElementChange(changedProp) {
      if (changedProp && changedProp.indexOf('ha_spl_') === 0) {
        this.destroyStickyPin();
        this.initStickyPin();
      }
    },
    onDestroy: function onDestroy() {
      this.destroyStickyPin();
      elementorModules.frontend.handlers.Base.prototype.onDestroy.apply(this, arguments);
    },
    destroyStickyPin: function destroyStickyPin() {
      var element = this.$element[0];
      if (this.scrollTrigger) {
        this.scrollTrigger.kill();
        this.scrollTrigger = null;
      }
      if (element && typeof ScrollTrigger !== "undefined") {
        ScrollTrigger.getAll().forEach(function (st) {
          if (st.vars.trigger === element || st.pin === element) {
            st.kill();
          }
        });
      }
      if (element) {
        element.style.removeProperty('--e-transform-transition-duration');
        element.style.removeProperty('--e-con-transform-transition-duration');
        element.style.removeProperty('--ha-spl-transition-duration');
      }
      this.$element.removeClass('ha-spl-sticky-active');
      if (this._toggleClass) {
        this.$element.removeClass(this._toggleClass);
      }
    },
    initStickyPin: function initStickyPin() {
      if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") return;
      // disable support for isEdit 
      if (elementorFrontend.isEditMode()) {
        return;
      }
      var settings = this.getElementSettings();
      if (settings.ha_spl_switcher !== 'yes') return;
      if ('mobile' === elementorFrontend.getCurrentDeviceMode() && settings.ha_spl_enable_on_device !== 'yes') {
        return;
      }
      var element = this.$element[0];
      if (!element) return;
      var start = this.getStartPosition(settings);
      var end = this.getEndPosition(settings);
      var toggleClass = this.getResponsiveSetting(settings, 'ha_spl_active_class') || '';
      var markers = settings.ha_spl_pin_markers === 'yes';
      this._toggleClass = toggleClass;
      ScrollTrigger.getAll().forEach(function (st) {
        if (st.vars.trigger === element || st.pin === element) {
          st.kill();
        }
      });
      var $element = this.$element;
      element.style.setProperty('--e-transform-transition-duration', '0s', 'important');
      element.style.setProperty('--e-con-transform-transition-duration', '0s', 'important');
      var transitionDuration = this.getResponsiveSetting(settings, 'ha_spl_transition_duration') || 0;
      element.style.setProperty('--ha-spl-transition-duration', transitionDuration + 's');
      var triggerElement = element;
      var pinTarget = this.getResponsiveSetting(settings, 'ha_spl_pin_type') !== 'false';
      var startTriggerSetting = this.getResponsiveSetting(settings, 'ha_spl_start_trigger') || 'default';
      if (startTriggerSetting === 'custom' && this.getResponsiveSetting(settings, 'ha_spl_custom_start_area')) {
        var customStartEl = document.querySelector(this.getResponsiveSetting(settings, 'ha_spl_custom_start_area'));
        if (customStartEl) {
          triggerElement = customStartEl;
          pinTarget = pinTarget ? element : false;
        }
      }
      var stConfig = {
        trigger: triggerElement,
        pin: pinTarget,
        start: start,
        end: end,
        markers: markers,
        pinSpacing: false,
        scrub: false,
        onEnter: function onEnter() {
          $element.addClass('ha-spl-sticky-active');
          if (toggleClass) {
            $element.addClass(toggleClass);
          }
        },
        onLeave: function onLeave() {
          $element.removeClass('ha-spl-sticky-active');
          if (toggleClass) {
            $element.removeClass(toggleClass);
          }
        },
        onEnterBack: function onEnterBack() {
          $element.addClass('ha-spl-sticky-active');
          if (toggleClass) {
            $element.addClass(toggleClass);
          }
        },
        onLeaveBack: function onLeaveBack() {
          $element.removeClass('ha-spl-sticky-active');
          if (toggleClass) {
            $element.removeClass(toggleClass);
          }
        }
      };
      var endTriggerSetting = this.getResponsiveSetting(settings, 'ha_spl_end_trigger') || 'default';
      if (endTriggerSetting === 'custom' && settings.ha_spl_custom_end_area) {
        var customEndEl = document.querySelector(settings.ha_spl_custom_end_area);
        if (customEndEl) {
          stConfig.endTrigger = customEndEl;
        }
      } else {
        var parentEndTrigger = this.getParentEndTrigger();
        if (parentEndTrigger) {
          stConfig.endTrigger = parentEndTrigger;
        }
      }
      this.scrollTrigger = ScrollTrigger.create(stConfig);
      setTimeout(function () {
        if (typeof ScrollTrigger !== "undefined") {
          ScrollTrigger.refresh();
        }
      }, 100);
    },
    getParentEndTrigger: function getParentEndTrigger() {
      var $parent = this.$element.parent();
      if (!$parent.length) return null;
      var $eCon = this.$element.closest('.e-con');
      if ($eCon.length) {
        while ($eCon.parent().closest('.e-con').length) {
          $eCon = $eCon.parent().closest('.e-con');
        }
        return $eCon[0];
      }
      var $container = this.$element.closest('.e-con-inner, .elementor-column, .elementor-section');
      if ($container.length) {
        return $container[0];
      }
      return $parent[0];
    },
    getStartPosition: function getStartPosition(settings) {
      var pinStart = this.getResponsiveSetting(settings, 'ha_spl_pin_start') || 'top-top';
      var position = pinStart.replace(/-/g, ' ');
      var offset = this.getResponsiveSetting(settings, 'ha_spl_pin_start_offset');
      if (offset !== undefined && offset !== '' && offset !== 0 && offset !== '0') {
        var offsetStr = String(offset);
        var isPercent = offsetStr.indexOf('%') !== -1;
        var numVal = parseFloat(offsetStr);
        if (numVal !== 0) {
          position += (numVal > 0 ? '+=' : '-=') + Math.abs(numVal);
          if (isPercent) {
            position += '%';
          }
        }
      }
      return position;
    },
    getEndPosition: function getEndPosition(settings) {
      var pinEnd = this.getResponsiveSetting(settings, 'ha_spl_pin_end') || 'bottom-bottom';
      var position = pinEnd.replace(/-/g, ' ');
      var offset = this.getResponsiveSetting(settings, 'ha_spl_pin_end_offset');
      if (offset !== undefined && offset !== '' && offset !== 0 && offset !== '0') {
        var offsetStr = String(offset);
        var isPercent = offsetStr.indexOf('%') !== -1;
        var numVal = parseFloat(offsetStr);
        if (numVal !== 0) {
          position += (numVal > 0 ? '+=' : '-=') + Math.abs(numVal);
          if (isPercent) {
            position += '%';
          }
        }
      }
      return position;
    }
  });
  $(window).on("elementor/frontend/init", function () {
    elementorFrontend.hooks.addAction("frontend/element_ready/global", function ($scope) {
      elementorFrontend.elementsHandler.addHandler(StickyPinElement, {
        $element: $scope
      });
    });
  });
})(jQuery);