import { IAnswer } from "@/data";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useNavigate, useLocation } from "react-router-dom";
import routes from "@/routes";
import Answer from "../../../../ui/Answer";
import QuestionnaireGreenButton from "../../../../ui/GreenButton";
import BlurComponent from "@/components/BlurComponent";
import { ELocalesPlacement } from "@/locales";

interface IMultiplyAnswersProps {
  answers: IAnswer[];
}

function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { currentlyAffecting, gender } = useSelector(
    selectors.selectQuestionnaire
  );
  const location = useLocation();

  const handleClick = (answer: IAnswer) => {
    if (currentlyAffecting.includes(`$${answer.id}`)) {
      return dispatch(
        actions.questionnaire.update({
          currentlyAffecting: currentlyAffecting.replace(`$${answer.id}`, ""),
        })
      );
    }
    if (answer.id === "none_of_these") {
      return dispatch(
        actions.questionnaire.update({
          currentlyAffecting: `$${answer.id}`,
        })
      );
    }
    if (
      currentlyAffecting.includes("$none_of_these") &&
      answer.id !== "none_of_these"
    ) {
      return;
    }
    return dispatch(
      actions.questionnaire.update({
        currentlyAffecting: `${currentlyAffecting}$${answer.id}`,
      })
    );
  };

  const handleNext = () => {
    navigate(
      `${routes.client.questionnaireV1()}/relationships/partnerPriority`
    );
  };

  return (
    <>
      <div className={styles["multiply-answers"]}>
        {answers.map((answer, index) => (
          <Answer
            key={index}
            answer={answer}
            disabled={
              currentlyAffecting.includes("$none_of_these") &&
              answer.id !== "none_of_these"
            }
            classNameContainer={
              currentlyAffecting.includes(`${answer.id}`)
                ? styles["answer-active"]
                : ""
            }
            type="multiply"
            active={currentlyAffecting.includes(`${answer.id}`)}
            gender={gender}
            onClick={() => handleClick(answer)}
          />
        ))}
      </div>
      {!!currentlyAffecting.length && (
        <BlurComponent
          className={styles.button}
          isActiveBlur={location.pathname.includes(
            "v1/questionnaire/relationships/currentlyAffecting"
          )}
        >
          <QuestionnaireGreenButton
            onClick={handleNext}
          >
            {translate("next")}
          </QuestionnaireGreenButton>
        </BlurComponent>
      )}
    </>
  );
}

export default MultiplyAnswers;
