w-aura/src/components/Stepper/index.tsx

import { IStep } from "@/data";
import styles from "./styles.module.css";
import { useEffect, useState } from "react";

interface IStepperProps {
  steps: IStep[];
  currentStep: number;
  currentQuestion: number;
}

function Stepper({ steps, currentStep, currentQuestion }: IStepperProps) {
  const [filterSteps, setFilterSteps] = useState(steps);
  const [currentStepIndex, setCurrentStepIndex] = useState(currentStep);
  const lastStepIndex = filterSteps.length - 1;

  useEffect(() => {
    if (
      ![
        "relationship_pattern",
        "relationships",
        "personalityTraits",
        "partnerProfile",
      ].includes(steps[currentStep].id)
    ) {
      return setFilterSteps(
        steps.filter(
          (item) =>
            !["relationship_pattern", "personalityTraits"].includes(item.id)
        )
      );
    }
    if (steps[currentStep].id === "personalityTraits") {
      return setFilterSteps(
        steps.filter(
          (item) =>
            !["relationship_pattern", "partnerProfile"].includes(item.id)
        )
      );
    }
    if (steps[currentStep].id === "partnerProfile") {
      return setFilterSteps(
        steps.filter(
          (item) => !["relationships", "personalityTraits"].includes(item.id)
        )
      );
    }
    if (steps[currentStep].id === "relationship_pattern") {
      return setFilterSteps(
        steps.filter(
          (item) => !["relationships", "personalityTraits"].includes(item.id)
        )
      );
    }
    if (steps[currentStep].id === "relationships") {
      return setFilterSteps(
        steps.filter(
          (item) =>
            !["relationship_pattern", "personalityTraits"].includes(item.id)
        )
      );
    }
  }, [currentStep, steps]);

  useEffect(() => {
    const idCurrentStep = steps[currentStep].id;
    setCurrentStepIndex(
      filterSteps.findIndex((step) => step.id === idCurrentStep)
    );
  }, [currentStep, filterSteps, steps]);

  const getLinePercent = (index: number) => {
    if (index < currentStepIndex) {
      return 100;
    } else if (index === currentStepIndex) {
      const percent =
        (currentQuestion / filterSteps[index].questions.length) * 100;
      if (percent > 100) {
        return 100;
      }
      return percent;
    } else {
      return 0;
    }
  };

  const getIndexOfStep = (id: string) => {
    return filterSteps.findIndex((item) => item.id === id);
  };

  return (
    <div className={styles.container}>
      {filterSteps.map((step, index) => {
        return (
          <div
            className={styles["step-container"]}
            style={{ width: `${100 / filterSteps.length}%` }}
            key={index}
          >
            <div
              className={styles.circle}
              style={{
                backgroundColor:
                  index > currentStepIndex ? "transparent" : step.color,
                borderColor: step.color,
                color: step.color,
              }}
            >
              {index > currentStepIndex ? getIndexOfStep(step.id) : null}
            </div>
            <div className={styles["line-container"]}>
              <div
                className={styles.line}
                style={{
                  width: `${getLinePercent(index)}%`,
                  backgroundColor: step.color,
                }}
              ></div>
            </div>
          </div>
        );
      })}
      <div
        className={styles.circle}
        style={{
          backgroundColor:
            lastStepIndex >= currentStepIndex ? "transparent" : "#bb6bd9",
          borderColor: "#bb6bd9",
          color: "#bb6bd9",
        }}
      >
        {lastStepIndex >= currentStepIndex ? lastStepIndex + 1 : null}
      </div>
    </div>
  );
}

export default Stepper;