// import { useFormik } from 'formik';
// import * as yup from 'yup';
import * as React from "react";
// import * as HttpUtils from "utils/HttpUtils";
// import * as UrlUtils from "utils/ApiPathConst";
// import { useNavigate } from "react-router-dom";
// import { useDispatch } from "react-redux";
// import { handleLogoutFunction, handleLogin} from 'auth/index';
// import useJwt from "auth/jwt/useJwt";

import {
    Grid,
    Typography,
    Button,
    // RadioGroup,
    // Dialog, DialogTitle, DialogContent, DialogActions,
    Stack, 
    // InputLabel,
    // OutlinedInput,
    // FormHelperText,
    // TextField,
    // IconButton, InputAdornment,
    // Box,
    // FormControl
} from '@mui/material';
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// import ForwardIcon from '@mui/icons-material/Forward';
import MainCard from 'components/MainCard';
// import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
// import {ThemeProvider} from "@emotion/react";
import {FormattedMessage, 
    // useIntl
} from "react-intl";
// import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import axios from 'axios';
import { 
    // useParams,
    Link 
} from 'react-router-dom';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';

// import LocaleContext from "components/I18nProvider";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const ResetPasswordSuccess = () => {

    const [isLoading, setLoding] = React.useState(true);

    React.useEffect(() => {
        setLoding(false)
    }, []);

    const BackgroundHead = {
        backgroundImage: `url(${titleBackgroundImg})`,
        width: 'auto',
        height: 'auto',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#0C489E',
        backgroundPosition: 'right'
    }

    return (
        isLoading ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" alignItems="center">
                <Grid item xs={12} md={12} width="100%" >
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                <FormattedMessage id="forgotUserPassword"/>
                            </Typography>
                        </Stack>
                    </div>
                </Grid>
                <Grid item xs={12} md={12} width={{sx:"90%", sm:"90%",md: "60%", xs: "90%"}}>
                    <MainCard
                        sx={{
                        maxWidth: { xs: 400, sm:730, md:800, lg: 1000 },
                        margin: { sm: 0, md: 3 },
                        '& > *': {
                            flexGrow: 1,
                            flexBasis: '50%'
                        }
                        }}
                        content={false}
                        border={false}
                        boxShadow
                    >
                        <Grid container spacing={4} sx={{ minHeight: {xs:"80vh", sm:"70vh", md: "70vh", lg:"70vh", xl:"50vh"} }} direction="column" justifyContent="flex-start" alignItems="center">
                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, }}>
                                    {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
                                <Typography display="inline" variant="h4">
                                    <FormattedMessage id="resetPasswordSuccess"/>
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
                                <Button color="success" variant="outlined" component={Link} to="/login">
                                    <Typography variant="h5">
                                        <FormattedMessage id="backToLogin"/>
                                    </Typography>
                                </Button>
                            </Grid>
                        </Grid>
                    </MainCard>
                </Grid>
            </Grid>
    );
};

export default ResetPasswordSuccess;