import { useState, useEffect } from "react";
import { useSearchParams, useNavigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export default function Auth() {
  const [searchParams] = useSearchParams();
  const currentServer = searchParams.get("token");

  const nav = useNavigate();

  const cairoLogin = () =>
    (window.location.href = `/api/auth/redirect?redirectUri=${window.location.href}`);

  return (
    <Box
      className="auth"
      sx={{
        height: "100%",
        backgroundColor: (theme) => theme.palette.primary.main,
      }}
    >
      <Box className="auth-display" sx={{ display: "flex", height: "95vh" }}>
        <Box
          sx={{
            height: "50%",
            width: "50%",
            m: "auto",
            display: "flex",
            flexWrap: "wrap",
          }}
        >
          <Box
            sx={{
              backgroundColor: "white",
              display: "inline-flex",
              m: "auto",
              borderRadius: "8px",
              height: "5rem",
            }}
          >
            <Button
              color="secondary"
              variant="outlined"
              onClick={cairoLogin}
              sx={{ p: "1.5rem" }}
              endIcon={
                <img
                  src="https://cairo.dunemask.net/cairo/icons/apple-touch-icon-120x120.png"
                  width="48px"
                  style={{ borderRadius: "4px" }}
                />
              }
            >
              Login with Cairo
            </Button>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}