import Image from "next/image";
import Link from "next/link";
import { useFormik } from "formik";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import { Button } from "@/components/button";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";

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 Signup = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
    onSubmit,
  });

  async function onSubmit(values: any) {
    console.log(values);
  }
  return (
    <Container 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 component="h1" variant="h5">
          Sign up
        </Typography>
        <Box
          component="form"
          noValidate
          onSubmit={formik.handleSubmit}
          sx={{ mt: 3 }}
        >
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="given-name"
                name="firstName"
                required
                fullWidth
                id="firstName"
                label="First Name"
                autoFocus
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                fullWidth
                id="lastName"
                label="Last Name"
                name="lastName"
                autoComplete="family-name"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="new-password"
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2 }}
          >
            Sign Up
          </Button>
          <Grid container justifyContent="flex-end">
            <Grid item>
              <Link href="/">Already have an account? Sign in</Link>
            </Grid>
          </Grid>
        </Box>
      </Box>
      <Box sx={{ mt: 6, mb: 4 }}>
        <CopyRight />
      </Box>
    </Container>
  );
};

export default Signup;