Progress Bar: Default

const PROG_BAR_SELECTORS = {
  fill: ".bux-progress-bar__fill",
  stepsContainer: ".bux-progress-bar__steps-container",
  step: ".bux-progress-bar__step",
  icon: ".bux-progress-bar__icon",
  complete: "bux-progress-bar__steps-container--complete",
  stepCurrent: "bux-progress-bar__step--current",
  stepComplete: "bux-progress-bar__step--complete",
};

export const createProgressBar = (container: HTMLElement) => {
  const fill = container.querySelector(PROG_BAR_SELECTORS.fill) as HTMLElement;
  const stepsContainer = container.querySelector(PROG_BAR_SELECTORS.stepsContainer) as HTMLElement;
  const steps = container.querySelectorAll(PROG_BAR_SELECTORS.step) as NodeListOf<HTMLElement>;

  if (!fill || !stepsContainer || steps.length === 0) {
    throw new TypeError(`Buckeye UX Progress Bar is missing required elements.`);
  }

  const totalSteps = steps.length - 1;

  let currentStep = 0;

  const initProgress = () => {
    currentStep = -1;

    updateFill();
    updateCircles();
  };

  const isValidStep = (): boolean => {
    return currentStep >= 0 && currentStep <= totalSteps;
  };

  const calculateProgress = (): number => {
    if (currentStep === totalSteps) {
      return 100;
    }

    const adjustedStepValue = currentStep + 0.5;
    const progressPercentage = (adjustedStepValue / totalSteps) * 100;

    return Math.min(progressPercentage, 100);
  };

  const getStepState = (stepIndex: number): "complete" | "current" | "inactive" => {
    if (stepIndex === currentStep) return "complete";
    if (stepIndex < currentStep) return "current";
    return "inactive";
  };

  const updateFill = () => {
    if (!isValidStep()) {
      fill.style.width = "0%";
      return;
    }

    const width = calculateProgress();
    fill.style.width = `${width}%`;
  };

  const updateCircles = () => {
    for (const [index, step] of steps.entries()) {
      step.classList.remove(PROG_BAR_SELECTORS.stepCurrent, PROG_BAR_SELECTORS.stepComplete);

      if (!isValidStep()) continue;

      const state = getStepState(index);

      if (state === "complete") {
        step.classList.add(PROG_BAR_SELECTORS.stepComplete);
      } else if (state === "current") {
        step.classList.add(PROG_BAR_SELECTORS.stepCurrent);
      }
    }
  };

  const set = (step: number) => {
    currentStep = step;
    if (!isValidStep()) return;
    updateFill();
    updateCircles();
  };

  const complete = () => {
    const containerWidth = stepsContainer.offsetWidth;
    const containerCenter = containerWidth / 2;

    for (const step of steps) {
      const stepCenter = step.offsetLeft + step.offsetWidth / 2;
      const deltaToCenter = containerCenter - stepCenter;
      step.style.transform = `translate(${deltaToCenter}px, 0)`;
    }

    setTimeout(() => {
      stepsContainer.classList.add(PROG_BAR_SELECTORS.complete);
    }, 300);
  };

  const reset = () => {
    stepsContainer.classList.remove(PROG_BAR_SELECTORS.complete);

    initProgress();
    for (const step of steps) {
      step.style.transform = "";
    }
  };

  initProgress();

  return {
    set,
    complete,
    reset,
  };
};