import { IAdditionalPurchasesStep } from "@/data/additionalPurchases";
import styles from "./styles.module.css";
import { useRef } from "react";
import CheckMark from "./checkMark.svg";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IAdditionalPurchasesStepsProps {
  steps: IAdditionalPurchasesStep[];
  activeStep: number;
}

function AdditionalPurchasesSteps({
  steps,
  activeStep,
}: IAdditionalPurchasesStepsProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const containerRef = useRef<HTMLDivElement>(null);
  const titlesRef = useRef<Array<HTMLSpanElement | null>>([]);
  const circleSize = 30;

  return (
    <div ref={containerRef} className={styles.container}>
      <div className={styles["steps-container"]}>
        {steps.map(({ title, id }, index) => (
          <div className={styles["step-with-line"]} key={index}>
            <div
              className={`${styles.step} ${
                activeStep === id ? styles.active : ""
              }`}
            >
              <span
                ref={(el) => (titlesRef.current[index] = el)}
                className={`${styles.title} ${
                  index === 0 && styles["title-first"]
                } ${index === steps.length - 1 && styles["title-last"]}`}
                key={index}
              >
                {translate(title)}
              </span>
              {activeStep < id && (
                <div
                  className={styles.circle}
                  style={{
                    width: `${circleSize}px`,
                    height: `${circleSize}px`,
                  }}
                />
              )}
              {activeStep === id && (
                <img src="/circle-with-dote.svg" alt="Circle with dote" />
              )}
              {activeStep > id && (
                <img src={CheckMark} alt="Circle with dote" />
              )}
            </div>

            {/* {id !== steps.length - 1 && (
              <div
                className={`${styles.line}`}
                style={{
                  width: `${lineWidth}px`,
                }}
              />
            )} */}
          </div>
        ))}
        <div className={`${styles.line}`} />
      </div>
    </div>
  );
}

export default AdditionalPurchasesSteps;
