import styles from "./styles.module.css";
import cn from "classnames";
import { IAdditionalPurchasesStep } from "@/data/additionalPurchases";
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>>([]);

  return (
    <div ref={containerRef} className={styles.container}>
      <div className={styles["steps-container"]}>
        {steps.map(({ title, id }, index) => (
          <div
            className={cn(styles["step-item"], {
              [styles.active]: activeStep === id,

              [styles["step-check"]]: activeStep > id,
            })}
            key={index}
          >
            <div className={styles["step-with-line"]}>
              <div
                className={cn(styles.step, {
                  [styles.active]: activeStep === id,
                  [styles["next-step"]]: activeStep === 0 && id === 1,
                })}
              >
                <span
                  ref={(el) => (titlesRef.current[index] = el)}
                  className={styles.title}
                  key={index}
                >
                  {translate(title)}
                </span>
                {activeStep < id && <div className={styles.circle} />}
                {activeStep > id && (
                  <img src={CheckMark} alt="Circle with dote" />
                )}
              </div>

              {id !== steps.length - 1 && (
                <div
                  className={cn(styles.line, {
                    [styles["line-check"]]: activeStep > id,
                  })}
                />
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default AdditionalPurchasesSteps;
