// material-ui
import {
    Grid,
    Typography,
    Button,
    Stack, 
    InputLabel,
} from '@mui/material';

import * as React from "react";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// import ForwardIcon from '@mui/icons-material/Forward';
import MainCard from 'components/MainCard';


import { useNavigate } from "react-router-dom";
import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage, useIntl} from "react-intl";
import usePageTitle from "components/usePageTitle";

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

const AfterForgotUsernamePage = () => {
    // Localized document title/meta for forgot username "sent" page
    usePageTitle("forgotUsername");

    const intl = useIntl();
    const navigate = useNavigate();

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

    const handleContinue = () => {
        // setOpen(false);
        navigate('/login');
    };

    return (
        <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="forgotUsername"/>
                        </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="center" alignItems="center">
                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                            <Grid container direction="column" alignItems="center">
                                <Grid item xs={12} md={12} lg={12} >
                                    <InputLabel htmlFor="email-login-title1">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="sendUsernameSuccess"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} >
                                    <InputLabel htmlFor="email-login-title2">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="sendUsernameSuccess2"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12} lg={12} mt={1} sx={{mb:3}}>
                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                <Button
                                    aria-label={intl.formatMessage({id: 'confirm'})}
                                    variant="contained"
                                    // type="submit"
                                    onClick={()=>handleContinue()}
                                >
                                    <FormattedMessage id="confirm"/>
                                </Button>
                            </ThemeProvider>
                        </Grid>
                    </Grid>

                </MainCard>
            </Grid>
        </Grid>
    );
};


export default AfterForgotUsernamePage;
