import Title from "@/components/Title";
import styles from "./styles.module.scss";
import Answer from "../../components/Answer";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { sleep } from "@/services/date";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { answerTimeOut } from "../../data";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { useMemo } from "react";
import { useSession } from "@/hooks/session/useSession";
import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
import { ESourceAuthorization } from "@/api/resources/User";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";

function RelationshipStatus() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const { updateSession } = useSession();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { relationshipStatus } = useSelector(
    selectors.selectCompatibilityV2Answers
  );

  const { variant: relationshipStatusPagePlacement = "v0" } = useUnleash({
    flag: EUnleashFlags.v2CompatibilityRelationshipStatusPagePlacement,
  });

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

  const isPathToEnteringBirthdate = useMemo(
    () => isReady && pathToEnteringBirthdate === "show",
    [isReady, pathToEnteringBirthdate]
  );

  const answers: {
    id: IAnswersSessionCompatibilityV2["relationship_status"];
    title: string;
  }[] = useMemo(() => {
    if (isPathToEnteringBirthdate) {
      return [
        {
          id: "single",
          title: translate("/relationship-status.v1.answer1"),
        },
        {
          id: "start",
          title: translate("/relationship-status.v1.answer2"),
        },
        {
          id: "in_relationship",
          title: translate("/relationship-status.v1.answer3"),
        },
        {
          id: "developing",
          title: translate("/relationship-status.v1.answer4"),
        },
        {
          id: "crisis",
          title: translate("/relationship-status.v1.answer5"),
        },
      ];
    }
    return [
      {
        id: "single",
        title: translate("/relationship-status.answer1"),
      },
      {
        id: "in_relationship",
        title: translate("/relationship-status.answer2"),
      },
      {
        id: "engaged",
        title: translate("/relationship-status.answer3"),
      },
      {
        id: "divorced",
        title: translate("/relationship-status.answer4"),
      },
      // {
      //   id: "complicated",
      //   title: translate("/relationship-status.answer5"),
      // },
    ];
  }, [isPathToEnteringBirthdate, translate]);

  const handleClick = async (
    id: IAnswersSessionCompatibilityV2["relationship_status"]
  ) => {
    dispatch(actions.compatibilityV2Answers.update({ relationshipStatus: id }));
    updateSession(
      {
        answers: {
          relationship_status: id,
        },
      },
      ESourceAuthorization["aura.compatibility.v2"]
    );
    if (id !== relationshipStatus) await sleep(answerTimeOut);

    if (isPathToEnteringBirthdate) {
      return navigate(routes.client.compatibilityV2RelationshipStatusResult());
    }

    if (relationshipStatusPagePlacement === "v1") {
      return navigate(
        `${routes.client.compatibilityV2Gender()}?noRedirectAB=true`
      );
    }

    if (relationshipStatusPagePlacement === "v2") {
      return navigate(routes.client.compatibilityV2Birthdate());
    }

    navigate(`${routes.client.compatibilityV2RelateFollowing()}/1`);
  };

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

  return (
    <div className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {isPathToEnteringBirthdate
          ? translate("/relationship-status.v1.title")
          : translate("/relationship-status.title")}
      </Title>
      {answers.map((answers, index) => (
        <Answer
          key={index}
          answer={answers}
          isSelected={relationshipStatus === answers.id}
          onClick={() => handleClick(answers.id)}
        />
      ))}
    </div>
  );
}

export default RelationshipStatus;
