(() => {
  'use strict';

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

  if (containers.length > 0) {
    for (const container of containers) {
      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 progressBars = container.querySelectorAll('.orokublocks-progress-bar');

      if (progressBars.length > 0) {
        for (const progressBar of progressBars) {
          const scale = {
            start: 0,
            end: Number(progressBar.getAttribute('data-scale-end')) || 0,
            stop: Number(progressBar.getAttribute('data-scale-stop')) || 0
          };

          const progressBarContainer = progressBar.querySelector('.xm-progress-bar_shortcode');
          const progressBarTextContainer = progressBar.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);
          }
        }
      }
    }
  }
})();