w-aura/src/components/CompatibilityV4/pages/WhatAddToAnalysis/index.tsx

import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import Answer from "../../components/Answer";
import { IAnswersSessionCompatibilityV4 } from "@/api/resources/Session";
import { useMemo } from "react";
import { actions, selectors } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { useSession } from "@/hooks/session/useSession";
import { useNavigate } from "react-router-dom";
import { ESourceAuthorization } from "@/api/resources/User";
import routes from "@/routes";
import Button from "../../components/Button";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import BlurComponent from "@/components/BlurComponent";

function WhatAddToAnalysis() {
    const dispatch = useDispatch();
    const { updateSession } = useSession();
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const { whatAddToAnalysis, relationshipStatus } = useSelector(
        selectors.selectCompatibilityV4Answers
    );
    const isSingle = relationshipStatus === "single";
    useLottie({
        preloadKey: ELottieKeys.scannedPhoto,
    });

    const answers: {
        id: IAnswersSessionCompatibilityV4["what_add_to_analysis"];
        title: string;
    }[] = useMemo(
        () => {
            if (isSingle) {
                return [
                    {
                        id: "potential_partner",
                        title: translate("/what-add-to-analysis.single.potential_partner"),
                    },
                    {
                        id: "family_love_model",
                        title: translate("/what-add-to-analysis.single.family_love_model"),
                    },
                    {
                        id: "strong_connection_date",
                        title: translate("/what-add-to-analysis.single.strong_connection_date"),
                    },
                    {
                        id: "dangerous_partner_type",
                        title: translate("/what-add-to-analysis.single.dangerous_partner_type"),
                    },
                    {
                        id: "relationship_karma",
                        title: translate("/what-add-to-analysis.single.relationship_karma"),
                    },
                    {
                        id: "when_not_start_relationship",
                        title: translate("/what-add-to-analysis.single.when_not_start_relationship"),
                    },
                    {
                        id: "scenario_next_love",
                        title: translate("/what-add-to-analysis.single.scenario_next_love"),
                    },
                    {
                        id: "what_radiate_in_relationship",
                        title: translate("/what-add-to-analysis.single.what_radiate_in_relationship"),
                    },
                    {
                        id: "how_partners_see_you",
                        title: translate("/what-add-to-analysis.single.how_partners_see_you"),
                    },
                    {
                        id: "key_compatibility_areas",
                        title: translate("/what-add-to-analysis.single.key_compatibility_areas"),
                    },
                ]
            }
            return [
                // {
                //     id: "5_compatibility_zones",
                //     title: translate("/what-add-to-analysis.5_compatibility_zones"),
                // },

                {
                    id: "former_partner",
                    title: translate("/what-add-to-analysis.former_partner"),
                },
                {
                    id: "potential_partner",
                    title: translate("/what-add-to-analysis.potential_partner"),
                },
                {
                    id: "analyzing_mistakes_relationships",
                    title: translate("/what-add-to-analysis.analyzing_mistakes_relationships"),
                },
                {
                    id: "astrological_triggers",
                    title: translate("/what-add-to-analysis.astrological_triggers"),
                },
                {
                    id: "relationship_timing",
                    title: translate("/what-add-to-analysis.relationship_timing"),
                },
                {
                    id: "practices_strengthen_communication",
                    title: translate("/what-add-to-analysis.practices_strengthen_communication"),
                },
                {
                    id: "scenarios_times_crisis",
                    title: translate("/what-add-to-analysis.scenarios_times_crisis"),
                },
                {
                    id: "astrological_view_conflicts",
                    title: translate("/what-add-to-analysis.astrological_view_conflicts"),
                },
                {
                    id: "energy_compatibility",
                    title: translate("/what-add-to-analysis.energy_compatibility"),
                },
                {
                    id: "key_compatibility_areas",
                    title: translate("/what-add-to-analysis.key_compatibility_areas"),
                },
                {
                    id: "talking_about_future",
                    title: translate("/what-add-to-analysis.talking_about_future"),
                },
            ]
        },
        [translate, isSingle]
    );

    const handleClick = async (id: IAnswersSessionCompatibilityV4["what_add_to_analysis"]) => {
        if (!whatAddToAnalysis) {
            dispatch(actions.compatibilityV4Answers.update({
                whatAddToAnalysis: id,
            }));
            return;
        }

        const currentAnswers = whatAddToAnalysis.split(",").filter(item => item);
        if (currentAnswers.includes(id)) {
            currentAnswers.splice(currentAnswers.indexOf(id), 1);
        } else {
            currentAnswers.push(id);
        }
        const newAnswers = currentAnswers.join(",");
        dispatch(actions.compatibilityV4Answers.update({
            whatAddToAnalysis: newAnswers,
        }));
    };

    const handleNext = () => {
        if (!whatAddToAnalysis?.length) {
            return;
        }

        updateSession({
            answers: {
                what_add_to_analysis: whatAddToAnalysis,
            },
        }, ESourceAuthorization["aura.compatibility.v4"]);

        if (whatAddToAnalysis.includes("potential_partner")) {
            return navigate(routes.client.compatibilityV4PotentialPartnerName());
        }
        if (whatAddToAnalysis.includes("former_partner")) {
            return navigate(routes.client.compatibilityV4FormerPartnerName());
        }
        navigate(routes.client.compatibilityV4Loading());
    };

    return (
        <div className={styles.container}>
            <Title variant="h2" className={styles.title}>
                {translate("/what-add-to-analysis.title")}
            </Title>
            {answers.map((answers, index) => (
                <Answer
                    key={index}
                    selectedClassName={styles.selected}
                    answerType="checkbox"
                    answer={answers}
                    isSelected={whatAddToAnalysis.includes(answers.id)}
                    onClick={() => handleClick(answers.id)}
                />
            ))}
            {!!whatAddToAnalysis?.length &&

                <div className={styles.buttonContainer}>
                    <BlurComponent isActiveBlur={true}>
                        <Button
                            className={styles.button}
                            onClick={handleNext}
                            disabled={!whatAddToAnalysis?.length}
                        >
                            {translate("next")}
                        </Button>
                    </BlurComponent>
                </div>
            }
        </div>
    );
}

export default WhatAddToAnalysis