text: import React, { useState, useEffect } from 'react';
  import PropTypes from 'prop-types';
  import validate from 'validate.js';
  import { makeStyles } from '@material-ui/styles';
  import {
    Grid,
    Button,
    IconButton,
    TextField,
    Typography,
    CircularProgress
  } from '@material-ui/core';
  import ArrowBackIcon from '@material-ui/icons/ArrowBack';
  import { connect } from 'react-redux';
  import { ForgetPassword } from 'redux/actions';
  
  const schema = {
    email: {
      presence: { allowEmpty: false, message: 'không để trống!' },
      email: {
        is: true,
        message: "không đúng!",
      },
      length: {
        maximum: 64,
        message: "tối đa 64 ký tự!",
      }
    }
  };
  
  const useStyles = makeStyles(theme => ({
    root: {
      backgroundColor: theme.palette.background.default,
      height: '100%'
    },
    grid: {
      height: '100%'
    },
    quoteContainer: {
      [theme.breakpoints.down('md')]: {
        display: 'none'
      }
    },
    quote: {
      backgroundColor: theme.palette.neutral,
      height: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundImage: 'url(/images/auth.jpg)',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center'
    },
    quoteInner: {
      textAlign: 'center',
      flexBasis: '600px'
    },
    quoteText: {
      color: theme.palette.white,
      fontWeight: 300
    },
    name: {
      marginTop: theme.spacing(3),
      color: theme.palette.white
    },
    bio: {
      color: theme.palette.white
    },
    contentContainer: {},
    content: {
      height: '100%',
      display: 'flex',
      flexDirection: 'column'
    },
    contentHeader: {
      display: 'flex',
      alignItems: 'center',
    },
    logoImage: {
      marginLeft: theme.spacing(4)
    },
    contentBody: {
      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)
    },
    socialButtons: {
      marginTop: theme.spacing(3)
    },
    socialIcon: {
      marginRight: theme.spacing(1)
    },
    sugestion: {
      marginTop: theme.spacing(2)
    },
    textField: {
      marginTop: theme.spacing(2)
    },
    signInButton: {
      margin: theme.spacing(2, 0)
    }
  }));
  
  const ForeverPassword = props => {
    const { history, forgetPassword, loading, message } = props;
  
    const classes = useStyles();
  
    const [formState, setFormState] = useState({
      isValid: false,
      values: {},
      touched: {},
      errors: {}
    });
  
    var first = React.useRef(true);
    useEffect(() => {
      if(first.current){
        first.current = false;
        return;
      }
      setFormState(formState => ({
        ...formState,
        errors: !loading ? {email: message} : {}
      }));
      if( !loading && !message )
        history.push('/sign-in');
    }, [loading]);
  
    useEffect(() => {
      const errors = validate(formState.values, schema);
  
      setFormState(formState => ({
        ...formState,
        isValid: errors ? false : true,
        errors: errors || {}
      }));
    }, [formState.values]);
  
    const handleBack = () => {
      history.goBack();
    };
  
    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 handleForgetPassword = event => {
      event.preventDefault();
      let email = { email: formState.values.email};
      forgetPassword(email, history); 
    };
  
    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}
          >
            <div className={classes.quote}>
              <div className={classes.quoteInner}>
                <Typography
                  className={classes.quoteText}
                  variant="h1"
                >
                  Tự hào kết nối trí tuệ Việt.
                </Typography>
                <div className={classes.person}>
                  <Typography
                    className={classes.name}
                    variant="body1"
                  >
                    Lê Đình Hiệu
                  </Typography>
                  <Typography
                    className={classes.bio}
                    variant="body2"
                  >
                    Quản trị trang Website
                  </Typography>
                </div>
              </div>
            </div>
          </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={handleForgetPassword}
                >
                  <Typography
                    className={classes.title}
                    variant="h2"
                  >
                    Khôi phục mật khẩu
                  </Typography>
                  <Typography
                    color="textSecondary"
                    gutterBottom
                  >
                  Nhập email đã đăng ký để khôi phục mật khẩu
                  </Typography>
                  <TextField
                    className={classes.textField}
                    error={hasError('email')}
                    fullWidth
                    helperText={
                      hasError('email') ? formState.errors.email : null
                    }
                    label="Địa chỉ email"
                    name="email"
                    onChange={handleChange}
                    type="text"
                    value={formState.values.email || ''}
                    variant="outlined"
                    autoFocus
                  />
                  <Button
                    className={classes.signInButton}
                    color="primary"
                    disabled={!formState.isValid||loading}
                    fullWidth
                    size="large"
                    type="submit"
                    variant="contained"
                  >
                    {loading && <CircularProgress size={18} />} Khôi phục ngay
                  </Button>
                </form>
              </div>
            </div>
          </Grid>
        </Grid>
      </div>
    );
  };
  
  ForeverPassword.propTypes = {
    history: PropTypes.object.isRequired,
    forgetPassword: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    message: PropTypes.string.isRequired,
  };
  
  const mapStateToProps = state => ({
      loading: state.dataResetPassword.loading,
      message: state.dataResetPassword.message,
  });
  
  const mapDispatchToProps = dispatch => ({
      forgetPassword: (e, h) => dispatch(ForgetPassword(e, h)),
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(ForeverPassword);
  