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

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 { width, elementRef } = useDynamicSize<HTMLDivElement>({});

  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 1;
    } else if (index === currentStepIndex) {
      const percent = currentQuestion / filterSteps[index].questions.length;
      if (percent > 1) {
        return 1;
      }
      return percent;
    } else {
      return 0;
    }
  };

  return (
    <div
      className={styles.container}
      style={{ gridTemplateColumns: `repeat(${filterSteps.length}, 1fr)` }}
      ref={elementRef}
    >
      {filterSteps.map((step, index) => {
        return (
          <div className={styles["step-container"]} key={index}>
            <CircleArrow
              width={
                width / filterSteps.length -
                (15 * (filterSteps.length - 1)) / filterSteps.length
              }
              value={getLinePercent(index)}
              color={step.color}
              uniqueKey={index}
            />
          </div>
        );
      })}
    </div>
  );
}

export default Stepper;
