text: import {
    Button,
    Checkbox,
    FormHelperText,
    Grid,
    IconButton,
    TextField,
    Typography,
  } from "@material-ui/core";
  import ArrowBackIcon from "@material-ui/icons/ArrowBack";
  import { makeStyles } from "@material-ui/styles";
  import Link from "next/link";
  import Router from "next/router";
  import React, { useEffect, useState } from "react";
  import validate from "validate.js";
  import Quote from "./shared/Quote";
  
  const schema = {
    firstName: {
      presence: { allowEmpty: false, message: "is required" },
      length: {
        maximum: 32,
      },
    },
    lastName: {
      presence: { allowEmpty: false, message: "is required" },
      length: {
        maximum: 32,
      },
    },
    email: {
      presence: { allowEmpty: false, message: "is required" },
      email: true,
      length: {
        maximum: 64,
      },
    },
    password: {
      presence: { allowEmpty: false, message: "is required" },
      length: {
        maximum: 128,
      },
    },
    policy: {
      presence: { allowEmpty: false, message: "is required" },
    },
  };
  
  const useStyles = makeStyles((theme) => ({
    root: {
      backgroundColor: theme.palette.background.default,
      height: "100vh",
    },
    grid: {
      height: "100%",
    },
    quoteContainer: {
      [theme.breakpoints.down("md")]: {
        display: "none",
      },
    },
    contentContainer: {},
    content: {
      height: "100%",
      display: "flex",
      flexDirection: "column",
    },
    contentHeader: {
      display: "flex",
      alignItems: "center",
      paddingTop: theme.spacing(5),
      paddingBototm: theme.spacing(2),
      paddingLeft: theme.spacing(2),
      paddingRight: theme.spacing(2),
    },
    logoImage: {
      marginLeft: theme.spacing(4),
    },
    contentBody: {
      flexGrow: 1,
      display: "flex",
      alignItems: "center",
      [theme.breakpoints.down("md")]: {
        justifyContent: "center",
      },
    },
    form: {
      paddingLeft: 100,
      paddingRight: 100,
      paddingBottom: 125,
      flexBasis: 700,
      [theme.breakpoints.down("sm")]: {
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2),
      },
    },
    title: {
      marginTop: theme.spacing(3),
    },
    textField: {
      marginTop: theme.spacing(2),
    },
    policy: {
      marginTop: theme.spacing(1),
      display: "flex",
      alignItems: "center",
    },
    policyCheckbox: {
      marginLeft: "-14px",
    },
    signUpButton: {
      margin: theme.spacing(2, 0),
    },
  }));
  
  const AuthSignUp = () => {
    const classes = useStyles();
  
    const [formState, setFormState] = useState({
      isValid: false,
      values: {},
      touched: {},
      errors: {},
    });
  
    useEffect(() => {
      const errors = validate(formState.values, schema);
  
      setFormState((formState) => ({
        ...formState,
        isValid: errors ? false : true,
        errors: errors || {},
      }));
    }, [formState.values]);
  
    const handleChange = (event) => {
      event.persist();
  
      setFormState((formState) => ({
        ...formState,
        values: {
          ...formState.values,
          [event.target.name]:
            event.target.type === "checkbox"
              ? event.target.checked
              : event.target.value,
        },
        touched: {
          ...formState.touched,
          [event.target.name]: true,
        },
      }));
    };
  
    const handleBack = () => {
      Router.back();
    };
  
    const handleSignUp = (event) => {
      event.preventDefault();
      Router.push("/");
    };
  
    const hasError = (field) =>
      formState.touched[field] && formState.errors[field] ? true : false;
  
    return (
      <div className={classes.root}>
        <Grid className={classes.grid} container>
          <Grid className={classes.quoteContainer} item lg={5}>
            <Quote />
          </Grid>
          <Grid className={classes.content} item lg={7} xs={12}>
            <div className={classes.content}>
              <div className={classes.contentHeader}>
                <IconButton onClick={handleBack}>
                  <ArrowBackIcon />
                </IconButton>
              </div>
              <div className={classes.contentBody}>
                <form className={classes.form} onSubmit={handleSignUp}>
                  <Typography className={classes.title} variant="h2">
                    Create new account
                  </Typography>
                  <Typography color="textSecondary" gutterBottom>
                    Use your email to create new account
                  </Typography>
                  <TextField
                    className={classes.textField}
                    error={hasError("firstName")}
                    fullWidth
                    helperText={
                      hasError("firstName") ? formState.errors.firstName[0] : null
                    }
                    label="First name"
                    name="firstName"
                    onChange={handleChange}
                    type="text"
                    value={formState.values.firstName || ""}
                    variant="outlined"
                  />
                  <TextField
                    className={classes.textField}
                    error={hasError("lastName")}
                    fullWidth
                    helperText={
                      hasError("lastName") ? formState.errors.lastName[0] : null
                    }
                    label="Last name"
                    name="lastName"
                    onChange={handleChange}
                    type="text"
                    value={formState.values.lastName || ""}
                    variant="outlined"
                  />
                  <TextField
                    className={classes.textField}
                    error={hasError("email")}
                    fullWidth
                    helperText={
                      hasError("email") ? formState.errors.email[0] : null
                    }
                    label="Email address"
                    name="email"
                    onChange={handleChange}
                    type="text"
                    value={formState.values.email || ""}
                    variant="outlined"
                  />
                  <TextField
                    className={classes.textField}
                    error={hasError("password")}
                    fullWidth
                    helperText={
                      hasError("password") ? formState.errors.password[0] : null
                    }
                    label="Password"
                    name="password"
                    onChange={handleChange}
                    type="password"
                    value={formState.values.password || ""}
                    variant="outlined"
                  />
                  <div className={classes.policy}>
                    <Checkbox
                      checked={formState.values.policy || false}
                      className={classes.policyCheckbox}
                      color="primary"
                      name="policy"
                      onChange={handleChange}
                    />
                    <Typography
                      className={classes.policyText}
                      color="textSecondary"
                      variant="body1"
                    >
                      I have read the{" "}
                      <Link href="#">
                        <a>Terms and Conditions</a>
                      </Link>
                    </Typography>
                  </div>
                  {hasError("policy") && (
                    <FormHelperText error>
                      {formState.errors.policy[0]}
                    </FormHelperText>
                  )}
                  <Button
                    className={classes.signUpButton}
                    color="primary"
                    disabled={!formState.isValid}
                    fullWidth
                    size="large"
                    type="submit"
                    variant="contained"
                  >
                    Sign up now
                  </Button>
                  <Typography color="textSecondary" variant="body1">
                    Have an account?{" "}
                    <Link href="/auth/signIn">
                      <a>Sign in</a>
                    </Link>
                  </Typography>
                </form>
              </div>
            </div>
          </Grid>
        </Grid>
      </div>
    );
  };
  
  export default AuthSignUp;
  