import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import routes from "@/routes";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import MainButton from "@/components/MainButton";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useEffect } from "react";
import metricService, { EGoals } from "@/services/metric/metricService";

function PaymentSuccessPage(): JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleNext = () => {
    dispatch(actions.status.update("subscribed"));
    navigate(routes.client.addReport());
  };

  useEffect(() => {
    metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
  }, []);

  return (
    <section className={`${styles.page} page`}>
      <img
        src="/SuccessIcon.png"
        alt="Success Icon"
        style={{ minHeight: "98px" }}
      />
      <div className={styles.text}>
        <Title variant="h1">The information has been sent to your email</Title>
        <p>{t("auweb.pay_good.title")}</p>
        <br />
        <p>{t("auweb.pay_good.text1")}</p>
      </div>
      <MainButton
        className={styles.button}
        onClick={handleNext}
        id="success-payment"
      >
        {t("auweb.pay_good.button")}
      </MainButton>
    </section>
  );
}

export default PaymentSuccessPage;