import { AuthPage } from "@refinedev/mui";

import GoogleIcon from "@mui/icons-material/Google";
import DiscordIcon from "../../components/DiscordIcon";
import {useSearchParams, Navigate, Link} from "react-router";
import MuiLink from "@mui/material/Link";
import * as React from "react";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";

export const Login = () => {
  const [searchParams] = useSearchParams();
  if (searchParams.get("oauth") == "success") {
    const redirect_to = localStorage.getItem("redirect_after_login")
    if (redirect_to) {
      return (<Navigate replace to={ redirect_to } />);
    }
  }
  return (
    <AuthPage
      type="login"
      formProps={{ defaultValues: { email: "test@test.te", password: "test" }, }}
      rememberMe={false}
      providers={[{
          name: "google",
          label: "Sign in with Google",
          icon: (<GoogleIcon style={{ fontSize: 24, }} />),
        },
        {
          name: "discord",
          label: "Sign in with Discord",
          icon: (<DiscordIcon style={{ fontSize: 24, }} />),
        },
      ]}
      forgotPasswordLink={
        <Stack
          sx={{
            direction: "row",
            display: "flex",
            justifyContent: "flex-end",
            alignItems: "center",
          }}
        >
          <MuiLink
            variant="body2"
            color="primary"
            fontSize="12px"
            component={Link}
            underline="none"
            to="/auth/forgot-password"
          >
            Forgot password?
          </MuiLink>
        </Stack>
      }
      registerLink={
        <Box
          sx={{
            mt: "24px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Typography
            textAlign="center"
            variant="body2"
            component="span"
            fontSize="12px"
          >
            Don’t have an account?
          </Typography>
          <MuiLink
            ml="4px"
            fontSize="12px"
            variant="body2"
            color="primary"
            component={Link}
            underline="none"
            to="/auth/register"
            fontWeight="bold"
          >
            Sign up
          </MuiLink>
        </Box>
      }
    />
  );
};