import React from "react";
import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import useSteps from "@/hooks/palmistry/use-steps";
import Button from "@/components/palmistry/button/button";
import Input from "@/components/palmistry/input/input";
import { actions } from "@/store";
import Title from "@/components/Title";
import Loader, { LoaderColor } from "@/components/Loader";
import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { ESourceAuthorization } from "@/api/resources/User";
import metricService, { EGoals } from "@/services/metric/metricService";

const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

export default function StepEmail() {
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const steps = useSteps();

  const [email, setEmail] = React.useState(steps.storedValue);
  const [emailIsValid, setEmailIsValid] = React.useState(false);
  const [isAuth, setIsAuth] = React.useState(false);
  const { error, isLoading, authorization } = useAuthentication();

  const onChangeEmail = (value: string) => {
    setEmail(value);
  };

  React.useEffect(() => {
    if (steps.storedValue) setEmail(steps.storedValue);
  }, [steps.storedValue]);

  React.useEffect(() => {
    const emailIsValid = email.match(emailRegex) !== null;
    setEmailIsValid(emailIsValid);

    if (emailIsValid) {
      dispatch(actions.form.addEmail(email));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [email]);

  const authorize = async () => {
    await authorization(email, ESourceAuthorization["aura.palmistry"]);
    metricService.reachGoal(EGoals.ENTERED_EMAIL);
    setIsAuth(true);
  };

  const onNext = async () => {
    await authorize();
    steps.saveCurrent(email);
    steps.goNext();
  };

  return (
    <>
      <div className="palmistry-container__title-wrapper">
        <h2>
          Enter your email to get your advanced Palmistry reading with AURA
        </h2>
      </div>

      <Input
        className="palmistry-container__input"
        placeholder="You Email"
        type="text"
        value={email}
        onChange={onChangeEmail}
        floatingPlaceholder
      />

      <div className="palmistry-container__description">
        <h3>We don’t share any personal information.</h3>
      </div>

      <div className="palmistry-container__policy">
        <p>
          By clicking "Continue" below you agree to AURA{" "}
          <a
            href="https://aura.wit.life/terms"
            target="_blank"
            rel="noreferrer nofollow"
          >
            EULA
          </a>{" "}
          and{" "}
          <a
            href="https://aura.wit.life/privacy"
            target="_blank"
            rel="noreferrer nofollow"
          >
            Privacy Policy
          </a>
          .
        </p>
      </div>

      <Button
        className="palmistry-container__button"
        type="button"
        active={emailIsValid}
        disabled={!emailIsValid}
        onClick={onNext}
      >
        {isLoading && <Loader color={LoaderColor.White} />}

        {!isLoading &&
          !(!error?.length && !isLoading && isAuth) &&
          t("_continue")}

        {!error?.length && !isLoading && isAuth && (
          <img
            style={{ height: "30px", width: "auto" }}
            src="/SuccessIcon.png"
            alt="Success Icon"
          />
        )}
      </Button>

      {isLoading && <Loader color={LoaderColor.White} />}

      {error?.length && (
        <Title variant="h3" style={{ color: "red", margin: 0 }}>
          Something went wrong
        </Title>
      )}
    </>
  );
}