import { useTranslations } from "@/hooks/translations";
import { progressBarSteps } from "../../data";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

interface IProgressBarProps {
  currentStep: number;
}

function calculateProgress(currentStep: number) {
  const totalProgress: number[] = [];
  let accumulatedLength = 0;

  progressBarSteps.forEach((step) => {
    if (currentStep >= accumulatedLength + step.length) {
      totalProgress.push(100);
    } else if (
      currentStep > accumulatedLength &&
      currentStep < accumulatedLength + step.length
    ) {
      const stepProgress =
        ((currentStep - accumulatedLength) / step.length) * 100;
      totalProgress.push(stepProgress);
    } else {
      totalProgress.push(0);
    }
    accumulatedLength += step.length;
  });

  return totalProgress;
}

function ProgressBar({ currentStep }: IProgressBarProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);

  const totalProgress = calculateProgress(currentStep);
  const totalLength = progressBarSteps.reduce(
    (acc, step) => acc + step.length,
    0
  );

  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <div className={styles.header}>
          <div>
            <img
              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgcm9sZT0naW1nJz4KICAgIDx0aXRsZT5Mb2NrPC90aXRsZT4KICAgIDxwYXRoCiAgICAgICAgZD0iTTguNjQ1ODMgNEg3LjkxNjY3VjIuNjY2NjdDNy45MTY2NyAxLjIgNi42MDQxNyAwIDUgMEMzLjM5NTgzIDAgMi4wODMzMyAxLjIgMi4wODMzMyAyLjY2NjY3VjRIMS4zNTQxN0MwLjk4OTU4MyA0IDAuNjI1IDQuMzMzMzMgMC42MjUgNC42NjY2N1Y5LjMzMzMzQzAuNjI1IDkuNjY2NjcgMC45ODk1ODMgMTAgMS4zNTQxNyAxMEg4LjY0NTgzQzkuMDEwNDIgMTAgOS4zNzUgOS42NjY2NyA5LjM3NSA5LjMzMzMzVjQuNjY2NjdDOS4zNzUgNC4zMzMzMyA5LjAxMDQyIDQgOC42NDU4MyA0Wk01LjcyOTE3IDguNjY2NjdINC4yNzA4M0w0LjU2MjUgNy4yQzQuMTk3OTIgNy4wNjY2NyAzLjkwNjI1IDYuNjY2NjcgMy45MDYyNSA2LjMzMzMzQzMuOTA2MjUgNS44IDQuNDE2NjcgNS4zMzMzMyA1IDUuMzMzMzNDNS41ODMzMyA1LjMzMzMzIDYuMDkzNzUgNS44IDYuMDkzNzUgNi4zMzMzM0M2LjA5Mzc1IDYuNzMzMzMgNS44NzUgNy4wNjY2NyA1LjQzNzUgNy4yTDUuNzI5MTcgOC42NjY2N1pNNi40NTgzMyA0SDMuNTQxNjdWMi42NjY2N0MzLjU0MTY3IDEuOTMzMzMgNC4xOTc5MiAxLjMzMzMzIDUgMS4zMzMzM0M1LjgwMjA4IDEuMzMzMzMgNi40NTgzMyAxLjkzMzMzIDYuNDU4MzMgMi42NjY2N1Y0WiIKICAgICAgICBmaWxsPSIjRTZFNkU2IiBmaWxsLW9wYWNpdHk9IjAuNSIgLz4KPC9zdmc+"
              alt=""
              width="10"
              height="10"
            />
            <span className={styles.text}>
              {translate("quiz_header.title")}
            </span>
          </div>
          <div className={styles.counter}>
            {currentStep}/{totalLength}
          </div>
        </div>
        <div className={styles.stepper}>
          {progressBarSteps.map((step, index) => (
            <div
              className={`${styles.step} ${
                !!totalProgress[index] && styles.completed
              }`}
              key={index}
            >
              <div className={styles.circle}>{index + 1}</div>
              <span className={styles["step-label"]}>
                <span className={styles.svg}>
                  <svg
                    focusable="false"
                    aria-hidden="true"
                    viewBox="0 0 24 24"
                    data-testid="CheckCircleIcon"
                  >
                    <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"></path>
                  </svg>
                </span>
              </span>
              <div
                className={styles.progress}
                color="var(--primary-800)"
                data-label={translate(step.name)}
              >
                <div></div>
                <span
                  className={styles["progress-bar"]}
                  role="progressbar"
                  aria-valuenow={0}
                  aria-valuemin={0}
                  aria-valuemax={100}
                >
                  <span
                    className={styles["progress-bar-fill"]}
                    style={{
                      transform: `translateX(-${100 - totalProgress[index]}%)`,
                    }}
                  ></span>
                </span>
                <div></div>
              </div>
            </div>
          ))}
          <div className={styles.step}>
            <div className={styles.circle}>{progressBarSteps.length + 1}</div>
            <span className={styles["step-label"]}>
              <span className={styles.svg}>
                <svg
                  focusable="false"
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  data-testid="CheckCircleIcon"
                >
                  <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"></path>
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProgressBar;
