(() => {
  'use strict';

  const containers = document.querySelectorAll('.orokublocks-scoringrating');

  if (containers.length > 0) {
    for (const container of containers) {
      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_shortcode');
      const progressBarTextContainer = container.querySelector('.bar-progress-wrap_shortcode');
    
      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_shortcode');

      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);
      }
    }
  }
})();