import Title from "../Title";
import styles from "./styles.module.css";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { EPathsFromHome } from "@/store/siteConfig";

function UserCallbacksPage(): JSX.Element {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const statChanges = useSelector(selectors.selectUserCallbacksPrevStat);
  const text = useSelector(selectors.selectUserCallbacksDescription);
  const homeConfig = useSelector(selectors.selectHome);
  const showNavbarFooter = homeConfig.isShowNavbar;

  const handleNext = () => {
    if (homeConfig.pathFromHome === EPathsFromHome.compatibility) {
      dispatch(
        actions.siteConfig.update({
          home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: true },
        })
      );
      return navigate(routes.client.home());
    }
    if (homeConfig.pathFromHome === EPathsFromHome.breath) {
      return navigate(routes.client.compatibility());
    }
    if (homeConfig.pathFromHome === EPathsFromHome.navbar) {
      return navigate(routes.client.breath());
    }
  };

  const getPaddingBottomPage = () => {
    if (
      homeConfig.pathFromHome === EPathsFromHome.compatibility &&
      showNavbarFooter
    )
      return "246px";
    if (showNavbarFooter) return "164px";
    return "108px";
  };

  return (
    <section
      className={`${styles.page} page`}
      style={{ paddingBottom: getPaddingBottomPage() }}
    >
      {<div className={styles.cross} onClick={handleNext}></div>}
      <div className={styles["title-container"]}>
        <Title variant="h3" className={styles.percent}>
          <>
            <p>Well done!</p>
            <p>Your results has changes...</p>
          </>
        </Title>
      </div>
      <div className={styles["result-container"]}>
        <div className={styles["result-container__values"]}>
          {statChanges.map((change, index) => (
            <div className={styles["result-container__value"]} key={index}>
              <span className={styles["result-container__value-label"]}>
                {change.label}
              </span>
              <span
                style={{ color: change.value > 0 ? "#00ea00" : "red" }}
                className={styles["result-container__value-value"]}
              >
                {change.value > 0 ? "+" : ""}
                {(change.value * 100).toFixed()}%
              </span>
            </div>
          ))}
        </div>
        <p className={styles["result-container__text"]}>{text}</p>
      </div>
      {homeConfig.pathFromHome === EPathsFromHome.breath && (
        <button
          className={`${styles.button} ${styles["button-red"]}`}
          onClick={handleNext}
          style={{ bottom: showNavbarFooter ? "88px" : "24px" }}
        >
          {translate("aura.breath_compatibility.button")}
        </button>
      )}
      {homeConfig.pathFromHome === EPathsFromHome.compatibility && (
        <button
          className={styles.button}
          onClick={handleNext}
          style={{ bottom: showNavbarFooter ? "88px" : "24px" }}
        >
          {translate("use-all-power")}
        </button>
      )}
    </section>
  );
}

export default UserCallbacksPage;