import Image from "next/image";
import Link from "next/link";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import { Button } from "@/components/button";
import { useFormik } from "formik";
import { signIn } from "next-auth/react";
import login_validate from "@/lib/validate";
import { useRouter } from "next/router";

function CopyRight(props: any) {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {"Copyright @ "}
      <a href="https://www.overdrive.co.za/" target="_blank" rel="noreferrer">
        Silicon Overdrive
      </a>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const Login = () => {
  const router = useRouter();

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      isChecked: false,
    },
    validate: login_validate,
    onSubmit,
  });

  async function onSubmit(values: any) {
    const res: any = await signIn("credentials", {
      redirect: false,
      email: values.email,
      password: values.password,
      callbackUrl: "/home",
    });

    console.log(res);

    if (res.ok) router.push(res.url);
  }

  return (
    <Container component="main" maxWidth={"xs"}>
      <Box
        sx={(theme) => ({
          marginTop: theme.spacing(8),
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        })}
      >
        <Image
          src={require("../../public/assets/images/SiliconLogo.png")}
          alt="Silicon Logo"
          priority={true}
        />
        <Typography variant="h5" sx={{ mt: 2 }}>
          Sign In
        </Typography>
        <Box
          component="form"
          onSubmit={formik.handleSubmit}
          noValidate
          sx={{ mt: 1 }}
        >
          <TextField
            margin="normal"
            required
            fullWidth
            id="email"
            autoComplete="email"
            autoFocus
            {...formik.getFieldProps("email")}
            sx={
              formik.errors.email && formik.touched.email
                ? { fieldset: { borderColor: "red" } }
                : {}
            }
          />
          <TextField
            margin="normal"
            required
            fullWidth
            type="password"
            id="password"
            autoComplete="current-password"
            {...formik.getFieldProps("password")}
            sx={
              formik.errors.password && formik.touched.password
                ? { fieldset: { borderColor: "red" } }
                : {}
            }
          />
          <FormControlLabel
            control={
              <Checkbox checked={formik.values.isChecked} color="primary" />
            }
            label="Remember me"
            name="isChecked"
            onChange={formik.handleChange}
          />

          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2 }}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="/forgotpassword">Forgot password?</Link>
            </Grid>
            <Grid item>
              <Link href="/signup">{"Don't have an account? Sign Up"}</Link>
            </Grid>
          </Grid>
        </Box>
      </Box>
      <Box sx={{ mt: 6, mb: 4 }}>
        <CopyRight />
      </Box>
    </Container>
  );
};

export default Login;