import { Box, Card, Grid, Typography } from '@mui/material';
import { useLocation, useNavigate } from 'react-router-dom';
import ResetPasswordForm from './ResetPasswordForm';
import { useStyles } from './resetPasswordStyles';
import { useState } from 'react';
import ResetPasswordSuccessIcon from '../../assets/images/icon/ResetPasswordSuccessIcon.png';
import { LoadingButton } from '@mui/lab';

function ResetPassword() {
  const navigate = useNavigate();
  const location = useLocation();
  const classes = useStyles();
  const [resetPasswordLinkSend, setResetPasswordLinkSend] = useState(false);
  const handleFormSubmit = () => {
    setResetPasswordLinkSend(true);
  };

  // Function to get URL parameters
  const getQueryParams = () => new URLSearchParams(location.search);

  // Determine if we are resetting or creating a password based on URL params
  const queryParams = getQueryParams();
  const isCreatePassword = queryParams.get('createPassword') === 'true';

  const headingText = !isCreatePassword ? 'Reset' : 'Create';
  const successMessage = !isCreatePassword
    ? 'Password Reset Successful'
    : 'Create Password Successful';

  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}></Grid>
                <Grid item xs={10}>
                  <Typography variant="Gilroy-bold" className={classes.heading}>
                    {headingText} your Password
                  </Typography>
                </Grid>
              </Box>
              <ResetPasswordForm onSubmit={handleFormSubmit} />
            </Grid>
          ) : (
            <Box paddingTop="35px" paddingBottom="5px" fontSize="0.8rem">
              <Box className={classes.successIcon}>
                <img
                  className={classes.resetPasswordSuccessIcon}
                  src={ResetPasswordSuccessIcon}
                />
              </Box>
              <Box textAlign="center">
                <Typography
                  variant="Gilroy-SemiBold"
                  className={classes.resetPasswordheading}
                  marginBottom="20px"
                >
                  {successMessage}
                </Typography>
                <Grid item width="80%" margin="auto">
                  <Typography
                    variant="Gilroy-normal"
                    className={classes.subheading}
                  >
                    Awesome, you have successfully{' '}
                    {!isCreatePassword ? 'updated' : 'created'} your password.
                  </Typography>
                </Grid>
                <LoadingButton
                  className={classes.submitButton}
                  size="small"
                  width="60%"
                  type="submit"
                  variant="contained"
                  onClick={() => navigate('/auth/login')}
                >
                  Back to Login
                </LoadingButton>
              </Box>
            </Box>
          )}
        </Grid>
      </Card>
    </Box>
  );
}

export default ResetPassword;
