class OrokuBlocks_ScoringRating_Elementor_Handler extends elementorModules.frontend.handlers.Base {
  getDefaultElements() {
    const container = this.$element[0].querySelector('.orokublocks-scoringrating');

    if (container) {
      const scale = {
        start: 0,
        end: Number(container.getAttribute('data-scale-end')) || 0,
        stop: Number(container.getAttribute('data-scale-stop')) || 0
      };

      const decimalPoints = Number(container.getAttribute('data-decimalpoints')) || 0;
      const animateOnScroll = Boolean(container.getAttribute('data-animateonscroll'));

      const defaultProgressBarWidth = 258;

      const progressBarWidth = container.getAttribute('data-progressbar-width') || defaultProgressBarWidth;
      const progressBarBreakpointWidth = Number(container.getAttribute('data-progressbar-breakpoint-width')) || false;
      const progressBarSplitParts = Number(container.getAttribute('data-progressbar-split-parts')) || 0;

      const containerStyles = getComputedStyle(container);

      const progressBarColor = containerStyles.getPropertyValue('--progress-bar-color') || false;
      const progressBarLineColor = containerStyles.getPropertyValue('--progress-bar-underline-color');

      const progressBarGradientStartColor = containerStyles.getPropertyValue('--progress-bar-gradient-start-color') || false;
      const progressBarGradientEndColor = containerStyles.getPropertyValue('--progress-bar-gradient-end-color') || false;

      const progressBarBackgroundColor = containerStyles.getPropertyValue('--card-background-color');

      const progressBarContainer = container.querySelector('.xm-progress-bar');
      const progressBarTextContainer = container.querySelector('.bar-progress-wrap');
    
      if (progressBarContainer && progressBarTextContainer) {
        const bottomProgressBarSettings = {
          containerEl: progressBarContainer,
          width: progressBarWidth,
          height: 6,
          lineColor: progressBarLineColor
        };

        const topProgressBarSettings = {
          containerEl: progressBarContainer,
          width: progressBarWidth,
          height: 6,
          scale: scale,
          decimalPoints: decimalPoints,
          speed: 30,
          animateOnScroll: animateOnScroll,
          linkText: true,
          linkToContainerEl: progressBarTextContainer,
          linkUnits: false
        };

        if (progressBarSplitParts > 1) {
          topProgressBarSettings.split = {
            parts: progressBarSplitParts,
            gap: 2,
            color: progressBarBackgroundColor
          };
        }
        
        if (progressBarColor) {
          topProgressBarSettings.lineColor = progressBarColor;
        } else {
          topProgressBarSettings.gradient = {
            colors: [progressBarGradientStartColor, progressBarGradientEndColor]
          };
        }

        if (progressBarBreakpointWidth) {
          const progressBarMobileWidth = Math.min(defaultProgressBarWidth, progressBarWidth);

          topProgressBarSettings.breakpoints = {
            [progressBarBreakpointWidth]: {
              width: progressBarMobileWidth,
              height: 6
            }
          };

          bottomProgressBarSettings.breakpoints = {
            [progressBarBreakpointWidth]: {
              width: progressBarMobileWidth,
              height: 6
            }
          };
        }

        /**
         * Progress Bars
         */
        new XM_ProgressBar(bottomProgressBarSettings);
        new XM_ProgressBar(topProgressBarSettings);
      }

      const arcContainer = container.querySelector('.xm-arc');

      if (arcContainer) {
        /**
         * Arcs
         */
        new XM_Arc({
          containerEl: arcContainer,
          width: 120,
          height: 120,
          lineWidth: 12,
          lineColor: progressBarLineColor,
          linkText: false
        });

        const topArcSettings = {
          containerEl: arcContainer,
          width: 120,
          height: 120,
          lineWidth: 12,
          scale: scale,
          decimalPoints: decimalPoints,
          speed: 50,
          animateOnScroll: animateOnScroll
        };

        if (progressBarColor) {
          topArcSettings.lineColor = progressBarColor;
        } else {
          topArcSettings.gradient = {
            colors: [progressBarGradientStartColor, progressBarGradientEndColor]
          };
        }
        
        new XM_Arc(topArcSettings);
      }
    }

    return {
      scoringRatingCard: container
    };
  }
}

window.addEventListener('elementor/frontend/init', () => {
  elementorFrontend.elementsHandler.attachHandler('orokublocks_scoringrating_elementor_widget', OrokuBlocks_ScoringRating_Elementor_Handler);
});