import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Button from "../../ui/Button";
import AnimateMessages, {
  IAnimateMessage,
} from "../../components/AnimateMessages";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

const messages: IAnimateMessage[] = [
  {
    name: "/answerHub.review_name_1",
    text: "/answerHub.review_text_1",
    avatar: "Avatar-2.webp",
  },
  {
    name: "/answerHub.review_name_2",
    text: "/answerHub.review_text_2",
    avatar: "Avatar-4.webp",
  },
  {
    name: "/answerHub.review_name_3",
    text: "/answerHub.review_text_3",
    avatar: "Avatar-6.webp",
  },
  {
    name: "/answerHub.review_name_4",
    text: "/answerHub.review_text_4",
    avatar: "Avatar-8.webp",
  },
  {
    name: "/answerHub.review_name_5",
    text: "/answerHub.review_text_5",
    avatar: "Avatar-10.webp",
  },
];

const currentDescription: Record<string, string> = {
  confused_about_choices: "/answerHub.description_style_1",
  worried_future: "/answerHub.description_style_2",
  disappointed_in_love_life: "/answerHub.description_style_3",
  optimistic_for_changes: "/answerHub.description_style_4",
  not_sure: "/answerHub.description_style_5",
  default: "/answerHub.description_style_4",
};

function AnswerHub() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const { gender } = useSelector(selectors.selectQuestionnaire);
  const { whatEmotion } = useSelector(selectors.selectAnswers);

  const handleNext = () => {
    navigate(routes.client.chatsQuizWhatYouWant());
  };

  return (
    <section className={styles.container}>
      <AnimateMessages messages={messages} />
      <Title className={styles.title} variant="h2">
        {translate("/answerHub.title")}
      </Title>
      <p className={styles.text}>
        {translate("/answerHub.description", {
          strong: (
            <strong>
              {translate("/answerHub.description_strong", {
                genders: translate(
                  gender === "female" ? "women" : "men"
                ).toLowerCase(),
              })}
            </strong>
          ),
          style: (
            <span className={styles.purple}>
              {translate(
                currentDescription[whatEmotion] || currentDescription.default
              )}
            </span>
          ),
        })}
      </p>
      <Button classNameContainer={styles.button} onClick={handleNext}>
        {translate("continue")}
      </Button>
    </section>
  );
}

export default AnswerHub;
