import { useDispatch } from "react-redux";
import { IAnswer } from "../../data";
import styles from "./styles.module.scss";
import { actions } from "@/store";
import { useSession } from "@/hooks/session/useSession";
import { ESourceAuthorization } from "@/api/resources/User";
import routes from "@/routes";

interface IAnswerProps {
  answer: IAnswer;
  classNameContainer?: string;
  active?: boolean;
  onClick?: () => void;
}

const notUpdateSessionRoutes = [
  routes.client.chatsQuizSatisfiedWithLife(),
  routes.client.chatsQuizProneToOverthinking(),
  routes.client.chatsQuizHeadOrHeart(),
  routes.client.chatsQuizDecisionGuidance(),
  routes.client.chatsQuizReadingExperience(),
];

function Answer({
  answer,
  classNameContainer = "",
  active = false,
  onClick,
}: IAnswerProps) {
  const dispatch = useDispatch();
  const { updateSession } = useSession();

  const handleClick = async () => {
    if (!notUpdateSessionRoutes.includes(window.location.pathname)) {
      await updateSession(
        {
          answers: {
            [answer.questionId]: answer.name,
          },
        },
        ESourceAuthorization["aura.chats"]
      );
    }
    dispatch(
      actions.chats.updateAnswers({
        [answer.questionId]: answer.value,
      })
    );
    onClick && onClick();
  };

  return (
    <div
      role="button"
      className={`${styles.container} ${classNameContainer} ${
        active ? styles.active : ""
      }`}
      onClick={handleClick}
    >
      <span className={styles.text}>{answer.name}</span>
    </div>
  );
}

export default Answer;
