text: import React, { useState } from 'react';
  import { useDispatch } from 'react-redux';
  import { useHistory } from 'react-router-dom';
  import { Button, Typography, Paper, Grid, FormControlLabel, Checkbox, Link, Container, CssBaseline, Box } from '@material-ui/core'
  import { GoogleLogin } from 'react-google-login';
  import { signin, signup } from '../../actions/auth';
  import useStyles from './styles';
  
  import Input from './Input';
  
  import Icon from './Icon';
  
  
  const Copyright = () => {
      return (
          <Typography variant="body2" color="textSecondary" align="center">
              {'Copyright © '}
              <Link color="inherit" href="https://material-ui.com/">
                  Vishleshan
              </Link>{' '}
              {new Date().getFullYear()}
              {'.'}
          </Typography>
      );
  }
  
  const Auth = () => {
      const [formData, setFormData] = useState({
          firstName: '',
          lastName: '',
          email: '',
          password: '',
          confirmPassword: ''
      })
      const [showPassword, setShowPassword] = useState(false);
      const [isSignup, setIsSignup] = useState(false);
      const dispatch = useDispatch()
      const history = useHistory();
      const classes = useStyles();
  
      const handleSubmit = (e) => {
          e.preventDefault()
          if (isSignup) {
              dispatch(signup(formData, history))
          } else {
              dispatch(signin(formData, history))
          }
      }
  
      const handleChange = (e) => {
          setFormData({ ...formData, [e.target.name]: e.target.value });
      };
  
      const switchMode = () => {
          setIsSignup((prevIsSignup) => !prevIsSignup);
          setShowPassword(false);
      }
  
      const handleShowPassword = () => setShowPassword((prevShowPassword) => !prevShowPassword);
  
      const googleFailure = (error) => {
          console.log(error)
          console.log("Google Sign In was unsuccessful. Try Again!");
      };
  
      const googleSuccess = async (res) => {
          const result = res?.profileObj;
          const token = res?.tokenId;
  
          try {
              dispatch({ type: 'AUTH', data: { result, token } });
  
              history.push('/home');
          } catch (error) {
              console.log(error);
          }
      };
  
      return (
          <Container component="main" maxWidth="xs" >
              <div className={classes.backPaper}>
                  <div className={classes.paper}>
                      <Typography component="h1" variant="h5">
                          {isSignup ? 'Sign Up' : 'Sign In'}
                      </Typography>
                      <form onSubmit={handleSubmit} className={classes.form}>
                          <Grid container spacing={2}>
                              {isSignup && (
                                  <>
                                      <Input name="firstName" label="First Name" handleChange={handleChange} autoFocus half />
                                      <Input name="lastName" label="Last Name" handleChange={handleChange} half />
                                  </>
                              )}
  
                              <Input name="email" label="Email Address" handleChange={handleChange} type="email" />
                              <Input name="password" label="Password" handleChange={handleChange} type={showPassword ? "text" : "password"} handleShowPassword={handleShowPassword} />
                              {isSignup && <Input name="confirmPassword" label="Repeat Password" handleChange={handleChange} type="password" />}
                          </Grid>
                          <FormControlLabel
                              control={<Checkbox value="remember" color="primary" />}
                              label="Remember me"
                          />
                          <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
                              {isSignup ? 'Sign Up' : 'Sign In'}
                          </Button>
                          <GoogleLogin
                              clientId="474688141554-p30r33nv95t7r6me30nr1ttl01u74hs6.apps.googleusercontent.com"
                              render={(renderProps) => (
                                  <Button className={classes.googleButton} color="primary" fullWidth onClick={renderProps.onClick} disabled={renderProps.disabled} startIcon={<Icon />} variant="contained">
                                      Google Sign In
                                  </Button>
                              )}
                              onSuccess={googleSuccess}
                              onFailure={googleFailure}
                              cookiePolicy="single_host_origin"
                          />
  
                          <Grid container justifyContent="flex-end">
                              <Grid item>
                                  <Link href="#" variant="body2" onClick={switchMode}>{isSignup ? "Already have an account? Sign In" : "Don't have an account? Sign Up"}</Link>
                              </Grid>
                          </Grid>
                      </form>
                  </div>
              </div>
              <Box mt={5}>
                  <Copyright />
              </Box>
          </Container>
  
      )
  }
  
  export default Auth