import Title from "@/components/Title";
import styles from "./styles.module.scss";
import EmailInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/EmailInput";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import Button from "../../ui/Button";
import metricService, {
  EGoals,
  EMetrics,
} from "@/services/metric/metricService";
import { ESourceAuthorization } from "@/api/resources/User";
import { useAuthentication } from "@/hooks/authentication/use-authentication";
import Loader, { LoaderColor } from "@/components/Loader";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function AuthModal() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const { error, isLoading, authorization } = useAuthentication();
  const dispatch = useDispatch();

  const [email, setEmail] = useState("");
  const [isValidEmail, setIsValidEmail] = useState(false);
  const [isValidationShow, setIsValidationShow] = useState(false);

  const handleValidEmail = (email: string) => {
    dispatch(actions.form.addEmail(email));
    setEmail(email);
    setIsValidEmail(true);
  };

  const handleClickAuth = async (event: React.FormEvent) => {
    event.preventDefault();
    if (!isValidEmail) return setIsValidationShow(true);
    await authorize();
    metricService.reachGoal(EGoals.ENTERED_EMAIL, [
      EMetrics.KLAVIYO,
      EMetrics.YANDEX,
      EMetrics.FACEBOOK,
    ]);
    navigate(routes.client.chatsEmailConfirm());
  };

  const authorize = async () => {
    await authorization(email, ESourceAuthorization["aura.chats"]);
  };

  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <div className={styles.content}>
          <Title className={styles.title} variant="h2">
            {translate("email_input_modal.title")}
          </Title>
          <h3 className={styles.subtitle}>
            {translate("email_input_modal.description", {
              style: (
                <span>{translate("email_input_modal.description_style")}</span>
              ),
            })}
          </h3>
          <form className={styles.form} onSubmit={handleClickAuth}>
            <label htmlFor="email" className={styles.label}>
              {translate("email_input_modal.email_label")}
            </label>
            <EmailInput
              name="email"
              value={email}
              placeholder={"example@mail.com"}
              onValid={handleValidEmail}
              onInvalid={() => setIsValidEmail(false)}
              inputContainerClassName={styles.inputContainer}
              inputClassName={`${styles.input} ${
                !isValidEmail && isValidationShow && styles.invalid
              }`}
              placeholderClassName={styles.placeholder}
            />
            {!error && !isValidEmail && isValidationShow && (
              <span className={styles.error}>
                {translate("email_input_modal.invalid_email")}
              </span>
            )}
            {!!error && (
              <span className={styles.error}>
                {translate("email_input_modal.something_went_wrong")}
              </span>
            )}
            <Button type="submit" classNameContainer={styles.button}>
              {!isLoading && translate("continue")}
              {isLoading && <Loader color={LoaderColor.White} />}
            </Button>
          </form>
          {/* Todo: add modal "why ask" */}
          <div className={styles["why-ask"]}>
            <button type="button">
              <span>{translate("email_input_modal.why_ask")}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default AuthModal;
