import {
  createStyles,
  Grid,
  makeStyles,
  useMediaQuery,
} from "@material-ui/core";
import { Redirect, useLocation, useRouteMatch } from "react-router-dom";
import { APP_LANDING, RESET_PASSWORD_PATH } from "../constants";
import { SECONDARY_GRADIENT, Theme } from "../theme";
import AuthContainer from "./AuthContainer";
import EmailVerification from "./EmailVerification";
import { ReactComponent as ForgotPasswordImg } from "./forgot_password.svg";
import { ReactComponent as LoginImg } from "./login_dashboard.svg";
import { ReactComponent as Logo } from "./logo.svg";
import { ReactComponent as NewAccountImg } from "./new_account.svg";
import { ReactComponent as NewEmailImg } from "./new_email.svg";
import ResetPassword from "./ResetPassword";
import SigninSignupForm from "./SigninSignupForm";
import { useSession } from "./useSession";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    imgContainer: {
      background: SECONDARY_GRADIENT,
      opacity: 0.9,
      display: "flex",
      alignItems: "center",
    },
    contentContainer: {
      padding: theme.spacing(5),
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      position: "relative",
    },
    logo: {
      height: 56,
      width: 56,
      marginBottom: theme.spacing(4),
    },
    img: {
      width: "100%",
      height: "auto",
      maxHeight: "80%",
      marginLeft: theme.spacing(-4),
    },
  })
);

type SigninSignupPageProps = {
  variant: "signup" | "signin";
};

const SigninSignupPage = ({ variant }: SigninSignupPageProps) => {
  const classes = useStyles();

  const isSm = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));

  const location = useLocation();
  const from = (location?.state as any)?.from?.pathname || APP_LANDING;

  const resetPasswordMatch = useRouteMatch({
    path: RESET_PASSWORD_PATH,
  });

  const { user } = useSession();
  // if user authed, redirect to home dashboard
  if (user?.emailVerified) {
    return <Redirect to={from} />;
  }

  let component = null;
  let Img = LoginImg;

  if (resetPasswordMatch) {
    component = <ResetPassword />;
    Img = ForgotPasswordImg;
  } else if (user) {
    component = <EmailVerification />;
    Img = NewEmailImg;
  } else {
    component = <SigninSignupForm variant={variant} from={from} />;
    Img = variant === "signin" ? LoginImg : NewAccountImg;
  }

  return (
    <AuthContainer>
      <Grid container>
        <Grid item xs={12} md={6} lg={5} className={classes.contentContainer}>
          <Logo className={classes.logo} />
          {component}
        </Grid>
        {!isSm && (
          <Grid item md={6} lg={7} className={classes.imgContainer}>
            <Img className={classes.img} />
          </Grid>
        )}
      </Grid>
    </AuthContainer>
  );
};

export default SigninSignupPage;