import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import routes from "@/routes";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import MainButton from "@/components/MainButton";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useEffect } from "react";
import metricService, {
  EGoals,
  EMetrics,
} from "@/services/metric/metricService";
import { ELocalesPlacement } from "@/locales";

function PaymentSuccessPage(): JSX.Element {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const currentProduct = useSelector(selectors.selectActiveProduct);

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

  useEffect(() => {
    metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
    metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
      currency: "USD",
      value: ((currentProduct?.trialPrice || 100) / 100).toFixed(2),
    });
  }, [currentProduct?.trialPrice]);

  return (
    <section className={`${styles.page} page`}>
      <img
        src="/SuccessIcon.webp"
        alt="Success Icon"
        style={{ minHeight: "98px" }}
      />
      <div className={styles.text}>
        <Title variant="h1">{translate("/payment/success.title")}</Title>
        <p>{translate("/payment/success.description")}</p>
      </div>
      <MainButton
        className={styles.button}
        onClick={handleNext}
        id="success-payment"
      >
        {translate("next")}
      </MainButton>
    </section>
  );
}

export default PaymentSuccessPage;