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

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

      const defaultProgressBarWidth = 258;

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

      const itemReviewCardElementStyles = getComputedStyle(itemReviewCardElement);

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

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

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

      const progressBars = itemReviewCardElement.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');
          const progressBarTextContainer = progressBar.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);
          }
        }
      }
    }

    return {
      itemReviewCard: itemReviewCardElement
    };
  }
}

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