import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";
import ReviewV1 from "./v1";
import ReviewV2 from "./v2";

function ReviewPage() {
  const navigate = useNavigate();
  const { variant: pathToEnteringBirthdate = "hide", isReady } = useUnleash({
    flag: EUnleashFlags.v2CompatibilityPathToEnteringBirthdate,
  });

  const { variant: reviewPage = "v1" } = useUnleash({
    flag: EUnleashFlags.v2CompatibilityReviewPage,
  });

  const handleNext = () => {
    if (pathToEnteringBirthdate === "show") {
      return navigate(routes.client.compatibilityV2CompatibilityTest());
    }
    navigate(routes.client.compatibilityV2Birthdate());
  };

  if (!isReady) {
    return (
      <div className={styles.container}>
        <Loader color={LoaderColor.Black} />
      </div>
    );
  }

  switch (reviewPage) {
    case "v1":
      return <ReviewV1 handleNext={handleNext} />;
    case "v2":
      return <ReviewV2 handleNext={handleNext} />;
    default:
      return <ReviewV1 handleNext={handleNext} />;
  }
}

export default ReviewPage;
