.jsx

import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { withRouter } from "react-router-dom";
import Layout from "@/components/layout";
import ForgotPasswordModal from "./components/forgotPasswordModal/index.jsx";
import { Icon } from "semantic-ui-react";
import jwt_decode from "jwt-decode";

import googleIcon from "@/assets/icons/google.svg";
import fbIcon from "@/assets/icons/facebook.svg";
import whiteTree from "@/assets/icons/splashScreen/whiteTree.svg";
import img1 from "@/assets/images/splashScreen/girl-brown-bg.png";
import { post, get } from "@/api/index";
import { dispatchError } from "@/api/error";
import { setToken } from "@/api/storage";
import { setUser } from "@/store/reducers/userSlice";
import Loader from '@/components/loader';
import queryString from 'query-string';


import "./styles.scss";

const Login = (props) => {
  const { history } = props;
  const tokenParam = queryString.parse(props.location.search).invitee;
  const {
    changePassword, token, oauthToken
  } = queryString.parse(props.location.search);

  const [signup, setSignup] = useState(!!tokenParam); // true for login
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();
  const [showPassword, setShowPassword] = useState(false);
  const [showModal, setShowModal] = useState(changePassword ? true : false);
  const [showOauthLoading, setOauthLoading] = useState(false);
  const dispatch = useDispatch();

  /**
   * check for oauth token on the url
   */
  useEffect(() => {
    if(!oauthToken) return;
    setOauthLoading(true);
    oauthLogin()
  }, []);

  const login = async () => {
    try {
      const {data:loginRes} = await post("auth/login", {
        email,
        password,
      });
      const { token, user } = loginRes;
      if (token && user) {
        dispatch(setUser(user));
        setToken(token);
        getFamilyDetails(token)
        history.push("/splash-menu");
      }
    } catch (err) {
      dispatchError(err.response?.data?.error);
    }
  };

  const oauthLogin = async () => {
    try{
      const {
        data: loginRes
      } = await get("user/tokendetails", oauthToken);
      const { token, user } = loginRes;
      dispatch(setUser(user));
      setToken(token);
      getFamilyDetails(token)
      history.push("/splash-menu");
    }catch(err){
      dispatchError(err.response?.data?.error);
    }
  }

  const getFamilyDetails = async (token) => {
    try {
      const familyDetails = await get("user/family", token)
      if (familyDetails && familyDetails.data){
        // TODO: Add To State
        console.log({familyDetails})
        //history.push("/family")
      }
    } catch (err) {
      dispatchError(err)
    }
  }

  const register = async () => {
    console.log(tokenParam)
    try {
      const {data: registerRes} = await post("auth/register", {
        email,
        password,
        tokenParam
      });
      const { token, user } = registerRes;
      if (token && user) {
        dispatch(setUser(user));
        setToken(token);
        history.push("/");
      }
    } catch (err) {
      dispatchError(err);
    }
  };

  const googleLogin = async () => {
    try {
      const googleRes =
        !process.env.NODE_ENV || process.env.NODE_ENV === "development"
          ? await get("auth/google/link?source=dev")
          : await get("auth/google/link");
      if (googleRes) {
        window.location.href = googleRes.data.link;
      }
    } catch (err) {
      dispatchError(err);
    }
  };

  const facebookLogin = async () => {
    try {
      const facebookRes =
        !process.env.NODE_ENV || process.env.NODE_ENV === "development"
          ? await get("auth/facebook/link?source=dev")
          : await get("auth/facebook/link");
      if (facebookRes) {
        window.location.href = facebookRes.data.link;
        console.log({ facebookRes });
      }
    } catch (err) {
      dispatchError(err);
    }
  };
  
  if(showOauthLoading){
    return <Loader />
  }

  return (
    <>
      <Layout>
        <div id="login-page">
          <div className="login-page">
            <div
              className="login-page__top"
              // style={{ backgroundColor: "rgba(101,81,67,0.3)", backgroundImage: `url(${img1})` }}
              style={{
                backgroundImage: `linear-gradient(0deg, rgba(50, 61, 77, 1) 0%, rgba(9, 9, 121, 0) 34%),url(${img1})`,
              }}
            >
              <img className="tree" src={whiteTree} alt="" />
            </div>
            <div className="login-page__bottom">
              <div className="login-page__bottom__title">
                <h1>Log In</h1>
                <section className="icons-wrapper">
                  <div
                    className="icon"
                    onClick={() => {
                      googleLogin();
                    }}
                  >
                    <img src={googleIcon} alt="" />
                  </div>
                  <div
                    className="icon"
                    onClick={() => {
                      facebookLogin();
                    }}
                  >
                    <img src={fbIcon} alt="" />
                  </div>
                </section>
              </div>

              <div className="login-page__bottom__form">
                <div className="input-wrapper">
                  <input
                    type="text"
                    placeholder="Email Address"
                    onChange={(e) => {
                      setEmail(e.target.value);
                    }}
                    value={email}
                  />
                </div>
                <div className="input-wrapper">
                  <input
                    type={showPassword ? "text" : "password"}
                    placeholder="Password"
                    onChange={(e) => {
                      setPassword(e.target.value);
                    }}
                    value={password}
                  />
                  <Icon
                    name={showPassword ? "eye slash" : "eye"}
                    onClick={() => {
                      setShowPassword(!showPassword);
                    }}
                  />
                </div>

                <button
                  onClick={() => {
                    signup ? register() : login();
                  }}
                >
                  {signup ? "Sign Up" : "Sign In"}
                </button>
              </div>

              <div className="login-page__bottom__extra-links">
                <h5
                  onClick={() => {
                    setSignup(!signup);
                  }}
                >
                  {signup ? "Sign In" : "Sign Up"}
                </h5>
                <h5
                  onClick={() => {
                    setShowModal(true);
                  }}
                >
                  Forgot Password?
                </h5>
              </div>
            </div>
          </div>
        </div>
      </Layout>
      <ForgotPasswordModal
        token={token}
        showModal={showModal}
        setShowModal={setShowModal}
      />
    </>
  );
};

export default withRouter(Login);