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 { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
import { ESourceAuthorization } from "@/api/resources/User";

function PartnerSimilarity() {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const { updateSession } = useSession();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { partnerSimilarity } = useSelector(
        selectors.selectCompatibilityV4Answers
    );

    const answers: {
        id: IAnswersSessionCompatibilityV4["partner_similarity"];
        title: string;
    }[] = useMemo(
        () => [
            {
                id: "very_similar",
                title: translate("/partner-similarity.answer1"),
            },
            {
                id: "average_similar",
                title: translate("/partner-similarity.answer2"),
            },
            {
                id: "not_similar",
                title: translate("/partner-similarity.answer3"),
            },
        ],
        [translate]
    );

    const handleClick = async (id: IAnswersSessionCompatibilityV4["partner_similarity"]) => {
        dispatch(actions.compatibilityV4Answers.update({ partnerSimilarity: id }));
        updateSession({
            answers: {
                partner_similarity: id,
            },
        }, ESourceAuthorization["aura.compatibility.v4"]);
        if (id !== partnerSimilarity) await sleep(answerTimeOut);
        navigate(routes.client.compatibilityV4BirthdatePartner());
    };

    return (
        <div className={styles.container}>
            <Title variant="h2" className={styles.title}>
                {translate("/partner-similarity.title")}
            </Title>
            {answers.map((answers, index) => (
                <Answer
                    key={index}
                    answer={answers}
                    isSelected={partnerSimilarity === answers.id}
                    onClick={() => handleClick(answers.id)}
                />
            ))}
        </div>
    );
}

export default PartnerSimilarity;
