import { ArrowBackOutlined } from '@mui/icons-material';
import { Box, Card, Grid, Typography } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import ForgotPasswordForm from './ForgotPasswordForm';
import { useStyles } from './forgotPasswordStyles';
import { useState } from 'react';

function ForgotPassword() {
  const navigate = useNavigate();
  const classes = useStyles();
  const [resetPasswordLinkSend, setResetPasswordLinkSend] = useState(false);
  const [email, setEmail] = useState('');

  const handleFormSubmit = () => {
    setResetPasswordLinkSend(true);
  };
  const handleGoBackClick = () => {
    navigate('/auth/login');
  };
  return (
    <Box className={classes.root}>
      <Card className={classes.card}>
        <Grid container display="flex" justifyContent="center">
          {!resetPasswordLinkSend ? (
            <Grid item xs={12}>
              <Box
                display="flex"
                alignItems="center"
                className={classes.forgotPasswordHeader}
              >
                <Grid item xs={2}>
                  <ArrowBackOutlined
                    className={classes.icon}
                    onClick={handleGoBackClick}
                  />
                </Grid>
                <Grid item xs={10}>
                  <Typography variant="Inter-bold" className={classes.heading}>
                    Reset your Password
                  </Typography>
                </Grid>
              </Box>
              <ForgotPasswordForm
                onSubmit={handleFormSubmit}
                setEmail={setEmail}
              />
            </Grid>
          ) : (
            <Box className={classes.emailSentMainDiv}>
              {/* <Box width="90%"> */}
              <Typography
                variant="Gilroy-SemiBold"
                className={classes.heading}
                marginBottom="20px"
              >
                Email Sent
              </Typography>
              <Typography
                variant="Gilroy-normal"
                className={classes.subheading}
                // marginBottom="30px"
              >
                {/* {` An email with instructions on how to reset your password has
                been sent to ${email}. It is valid for next 24 hrs.
                Check your spam or junk folder if you don’t see the email in
                your inbox.`} */}
                {`An email with instructions on how to reset your password has
  been sent to `}
                <span style={{ fontWeight: 'bold' }}>{email}</span>
                {`. It is valid for the next 24 hrs. Check your spam or junk folder if you don’t see the email in
  your inbox.`}
              </Typography>
              {/* </Box> */}
            </Box>
          )}
        </Grid>
      </Card>
    </Box>
  );
}

export default ForgotPassword;