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

function GoalSetup() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const { goal } = useSelector(selectors.selectAnswers);

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

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <section className={styles.container}>
      <p className={styles["title-text"]}>{translate("/goalSetup.title")}</p>
      <div className={styles["image-container"]}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 266 197"
          width="266"
          height="197"
          preserveAspectRatio="xMidYMid slice"
          style={{
            width: "100%",
            height: "100%",
            transform: "translate3d(0px, 0px, 0px)",
            contentVisibility: "visible",
          }}
        >
          <defs>
            <clipPath id="__lottie_element_21">
              <rect width="266" height="197" x="0" y="0"></rect>
            </clipPath>
            <linearGradient
              id="__lottie_element_25"
              spreadMethod="pad"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="100"
              y2="0"
            >
              <stop offset="0%" stopColor="rgb(254,243,226)"></stop>
              <stop offset="50%" stopColor="rgb(250,233,183)"></stop>
              <stop offset="100%" stopColor="rgb(247,194,146)"></stop>
            </linearGradient>
            <linearGradient
              id="__lottie_element_29"
              spreadMethod="pad"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="100"
              y2="0"
            >
              <stop offset="0%" stopColor="rgb(254,243,226)"></stop>
              <stop offset="50%" stopColor="rgb(250,233,183)"></stop>
              <stop offset="100%" stopColor="rgb(247,194,146)"></stop>
            </linearGradient>
          </defs>
          <g clipPath="url(#__lottie_element_21)">
            <g
              transform="matrix(1.8899999856948853,0,0,1.8899999856948853,177.87490844726562,133.66526794433594)"
              opacity="1"
              style={{ display: "block" }}
            >
              <g
                opacity="1"
                transform="matrix(1,0,0,1,8.59000015258789,8.256999969482422)"
              >
                <path
                  fill="rgb(249,233,183)"
                  fillOpacity="1"
                  d=" M0.21400000154972076,-8.006999969482422 C0.21400000154972076,-8.006999969482422 -0.26100000739097595,-8.006999969482422 -0.26100000739097595,-8.006999969482422 C-0.5460000038146973,-8.006999969482422 -0.7820000052452087,-7.802000045776367 -0.7820000052452087,-7.5279998779296875 C-1.0190000534057617,-4.316999912261963 -4.526000022888184,-1.0360000133514404 -7.867000102996826,-0.7400000095367432 C-8.126999855041504,-0.7179999947547913 -8.34000015258789,-0.49000000953674316 -8.34000015258789,-0.23899999260902405 C-8.34000015258789,-0.23899999260902405 -8.34000015258789,0.23800000548362732 -8.34000015258789,0.23800000548362732 C-8.34000015258789,0.5130000114440918 -8.12600040435791,0.7170000076293945 -7.8420000076293945,0.7400000095367432 C-4.525000095367432,0.9679999947547913 -1.1380000114440918,4.269999980926514 -0.7820000052452087,7.48199987411499 C-0.7590000033378601,7.7789998054504395 -0.49799999594688416,8.006999969482422 -0.16599999368190765,8.006999969482422 C-0.16599999368190765,8.006999969482422 0.16599999368190765,8.006999969482422 0.16599999368190765,8.006999969482422 C0.4970000088214874,8.006999969482422 0.7580000162124634,7.7789998054504395 0.781000018119812,7.460000038146973 C1.065999984741211,3.8610000610351562 4.074999809265137,0.8989999890327454 7.817999839782715,0.7170000076293945 C8.12600040435791,0.6949999928474426 8.34000015258789,0.46700000762939453 8.34000015258789,0.17100000381469727 C8.34000015258789,0.17100000381469727 8.34000015258789,-0.23899999260902405 8.34000015258789,-0.23899999260902405 C8.34000015258789,-0.5350000262260437 8.102999687194824,-0.7639999985694885 7.817999839782715,-0.7860000133514404 C4.051000118255615,-0.968999981880188 1.0190000534057617,-3.9519999027252197 0.781000018119812,-7.5970001220703125 C0.734000027179718,-7.802000045776367 0.49799999594688416,-8.006999969482422 0.21400000154972076,-8.006999969482422z"
                ></path>
              </g>
            </g>
            <g
              transform="matrix(0.5600000023841858,0,0,0.5600000023841858,76.72735595703125,42.38835906982422)"
              opacity="1"
              style={{ display: "block" }}
            >
              <g
                opacity="1"
                transform="matrix(1,0,0,1,16.518999099731445,16.518999099731445)"
              >
                <path
                  fill="rgb(249,233,183)"
                  fillOpacity="1"
                  d=" M14.789999961853027,-1.4789999723434448 C7.425000190734863,-1.4789999723434448 1.4789999723434448,-7.423999786376953 1.4789999723434448,-14.789999961853027 C1.4789999723434448,-15.618000030517578 0.828000009059906,-16.268999099731445 0,-16.268999099731445 C-0.828000009059906,-16.268999099731445 -1.4789999723434448,-15.618000030517578 -1.4789999723434448,-14.789999961853027 C-1.4789999723434448,-7.423999786376953 -7.425000190734863,-1.4789999723434448 -14.789999961853027,-1.4789999723434448 C-15.618000030517578,-1.4789999723434448 -16.268999099731445,-0.828000009059906 -16.268999099731445,0 C-16.268999099731445,0.828000009059906 -15.618000030517578,1.4800000190734863 -14.789999961853027,1.4800000190734863 C-7.425000190734863,1.4800000190734863 -1.4789999723434448,7.425000190734863 -1.4789999723434448,14.789999961853027 C-1.4789999723434448,15.619000434875488 -0.828000009059906,16.268999099731445 0,16.268999099731445 C0.828000009059906,16.268999099731445 1.4789999723434448,15.619000434875488 1.4789999723434448,14.789999961853027 C1.4789999723434448,7.425000190734863 7.425000190734863,1.4800000190734863 14.789999961853027,1.4800000190734863 C15.619000434875488,1.4800000190734863 16.268999099731445,0.828000009059906 16.268999099731445,0 C16.268999099731445,-0.828000009059906 15.619000434875488,-1.4789999723434448 14.789999961853027,-1.4789999723434448z"
                ></path>
              </g>
            </g>
            <g
              transform="matrix(1,0,0,1,167.4199981689453,35.08100128173828)"
              opacity="1"
              style={{ display: "block" }}
            >
              <g
                opacity="1"
                transform="matrix(1,0,0,1,5.567999839782715,5.568999767303467)"
              >
                <path
                  fill="rgb(249,233,183)"
                  fillOpacity="1"
                  d=" M4.835999965667725,-0.48399999737739563 C2.427999973297119,-0.48399999737739563 0.48399999737739563,-2.427999973297119 0.48399999737739563,-4.835999965667725 C0.48399999737739563,-5.10699987411499 0.2709999978542328,-5.318999767303467 0.0010000000474974513,-5.318999767303467 C-0.27000001072883606,-5.318999767303467 -0.4830000102519989,-5.10699987411499 -0.4830000102519989,-4.835999965667725 C-0.4830000102519989,-2.427999973297119 -2.427000045776367,-0.48399999737739563 -4.835000038146973,-0.48399999737739563 C-5.105999946594238,-0.48399999737739563 -5.317999839782715,-0.2709999978542328 -5.317999839782715,0 C-5.317999839782715,0.27000001072883606 -5.105999946594238,0.4830000102519989 -4.835000038146973,0.4830000102519989 C-2.427000045776367,0.4830000102519989 -0.4830000102519989,2.427000045776367 -0.4830000102519989,4.835000038146973 C-0.4830000102519989,5.105999946594238 -0.27000001072883606,5.318999767303467 0.0010000000474974513,5.318999767303467 C0.2709999978542328,5.318999767303467 0.48399999737739563,5.105999946594238 0.48399999737739563,4.835000038146973 C0.48399999737739563,2.427000045776367 2.427999973297119,0.4830000102519989 4.835999965667725,0.4830000102519989 C5.10699987411499,0.4830000102519989 5.317999839782715,0.27000001072883606 5.317999839782715,0 C5.317999839782715,-0.2709999978542328 5.10699987411499,-0.48399999737739563 4.835999965667725,-0.48399999737739563z"
                ></path>
              </g>
            </g>
            <g
              transform="matrix(1,0,0,1,133,98.5)"
              opacity="1"
              style={{ display: "block" }}
            >
              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <path
                  fill="url(#__lottie_element_29)"
                  fillOpacity="1"
                  d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
                ></path>
                <path
                  strokeLinecap="butt"
                  strokeLinejoin="miter"
                  fillOpacity="0"
                  strokeMiterlimit="4"
                  stroke="rgb(255,255,255)"
                  strokeOpacity="1"
                  strokeWidth="0"
                  d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
                ></path>
              </g>
            </g>
            <g
              transform="matrix(1,0,0,1,353.5,-29.5)"
              opacity="1"
              style={{ display: "block" }}
            >
              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <path
                  fill="url(#__lottie_element_25)"
                  fillOpacity="1"
                  d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
                ></path>
                <path
                  strokeLinecap="butt"
                  strokeLinejoin="miter"
                  fillOpacity="0"
                  strokeMiterlimit="4"
                  stroke="rgb(255,255,255)"
                  strokeOpacity="1"
                  strokeWidth="0"
                  d=" M85.75,-36.75 C84.01499938964844,-35.724998474121094 -84.75,76.25 -84.75,76.25 C-84.75,76.25 97.38899993896484,-16.871999740600586 98.75,-18 C100.93800354003906,-19.812999725341797 104,-25.5 100.25,-31.75 C96.5,-38 88.5,-38.375 85.75,-36.75z"
                ></path>
              </g>
            </g>
          </g>
        </svg>
      </div>
      <Title className={styles.title} variant="h2">
        {goal === "about_ex" && <>{translate("/goalSetup.ex_title")}</>}
        {goal === "give_advice" && (
          <>{translate("/goalSetup.give_advice_title")}</>
        )}
        {goal === "give_guidance" && (
          <>{translate("/goalSetup.future_title")}</>
        )}
        {goal === "all" && <>{translate("/goalSetup.all_title")}</>}
      </Title>
      <p className={styles.text}>
        {goal === "about_ex" && (
          <>
            {translate("/goalSetup.ex_text", {
              style: <span>{translate("/goalSetup.ex_text_style")}</span>,
            })}
          </>
        )}
        {goal === "give_advice" && (
          <>
            {translate("/goalSetup.give_advice_text", {
              style: (
                <span>{translate("/goalSetup.give_advice_title_style")}</span>
              ),
            })}
          </>
        )}
        {goal === "give_guidance" && (
          <>
            {translate("/goalSetup.future_text", {
              style: <span>{translate("/goalSetup.future_title_style")}</span>,
            })}
          </>
        )}
        {goal === "all" && (
          <>
            {translate("/goalSetup.all_text", {
              style: <span>{translate("/goalSetup.all_title_style")}</span>,
            })}
          </>
        )}
      </p>
      <div className={styles.footer}>
        <p>{translate("/goalSetup.change_goal")}</p>
        <Button classNameContainer={styles.button} onClick={handleNext}>
          {translate("continue")}
        </Button>
        <Button
          classNameContainer={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          {translate("back")}
        </Button>
      </div>
    </section>
  );
}

export default GoalSetup;