import React from "react";
import { useOktaAuth } from "@okta/okta-react";
import SignInWidget from "./SignInWidget";
import { Redirect, useHistory } from "react-router-dom";
import {
  Grid,
  Hidden,
  makeStyles,
  AppBar,
  Toolbar,
  Button,
  CircularProgress,
} from "@material-ui/core";
import { ReactComponent as LoginImg } from "../../assets/imgs/socialmedia.svg";
import logo from "../../assets/imgs/Logo.svg";
import logoDark from "../../assets/imgs/Logo-dark.svg";

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
  },
  loading: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100vh",
  },
  navbar: {
    height: theme.navbar.width.close,
    display: "flex",
    justifyContent: "center",
  },
  imageContainer: {
    overflow: "hidden",
    height: "100%",
    marginRight: "7%",
  },
  image: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
  },
  logo: {
    height: "20px",
  },
  widgetContainer: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  },
}));

const LoginOkta = ({ baseUrl }) => {
  const { authService, authState } = useOktaAuth();
  const { push } = useHistory();
  const classes = useStyles();

  const onSuccess = async (res) => {
    authService.login("/home");
    authService.redirect({
      sessionToken: res.session.token,
    });
  };

  const handleLogoClick = () => {
    push("/");
  };

  if (authState.isPending) {
    return (
      <div className={classes.loading}>
        <CircularProgress />
      </div>
    );
  }

  return authState.isAuthenticated ? (
    <Redirect to="/home" />
  ) : (
    <Grid container wrap="wrap" className={classes.root}>
      <Hidden mdUp>
        <Grid item xs={12}>
          <AppBar className={classes.navbar} position="static">
            <Toolbar>
              <Button onClick={handleLogoClick}>
                <img className={classes.logo} src={logo} alt="SoMe logo" />
              </Button>
            </Toolbar>
          </AppBar>
        </Grid>
      </Hidden>
      <Grid item xs className={classes.widgetContainer}>
        <Hidden mdDown>
          <Button
            onClick={handleLogoClick}
            style={{ position: "absolute", top: ".8em", left: ".8em" }}
          >
            <img className={classes.logo} src={logoDark} alt="SoMe logo" />
          </Button>
        </Hidden>
        <SignInWidget
          baseUrl={process.env.REACT_APP_OKTA_DOMAIN}
          onSuccess={onSuccess}
        />
      </Grid>
      <Hidden xsDown>
        <Grid item xs={5} className={classes.imageContainer}>
          <LoginImg className={classes.image} alt="Login" />
        </Grid>
      </Hidden>
    </Grid>
  );
};

export default LoginOkta;