import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
import routes from "@/routes";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import YesNoButtons from "@/components/ChatsPath/components/YesNoButtons";
import { images } from "@/components/ChatsPath/data";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function ResonateLove() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const { updateSession } = useSession();
  const dispatch = useDispatch();
  useUpdateStep(19);
  const navigate = useNavigate();

  const handleNext = async (answer: "yes" | "no") => {
    await updateSession(
      {
        answers: {
          resonateLove: answer,
        },
      },
      ESourceAuthorization["aura.chats"]
    );
    dispatch(actions.chats.updateAnswers({ resonateLove: answer }));
    navigate(routes.client.chatsQuizResonateLife());
  };

  return (
    <>
      <h2 className={`chats-answers-title ${styles.title}`}>
        {translate("/quiz/resonateLove.title")}
      </h2>
      <img
        className={styles.image}
        src={images("resonate-3.webp")}
        alt="Image"
      />
      <YesNoButtons onClick={(answer) => handleNext(answer)} />
    </>
  );
}

export default ResonateLove;