// 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";

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

const AfterForgotPasswordPage = () => {
    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: '95vh', 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} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
                <Button
                    aria-label={intl.formatMessage({id: 'back'})}
                    title={intl.formatMessage({id: 'back'})}
                    sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
                >
                    <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                </Button>
            </Grid> */}
            {/* <Grid item xs={12}>
                    <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
                </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="sentSecurityCode1"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} >
                                    <InputLabel htmlFor="email-login-title2">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="sentSecurityCode2"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                                {/* <Grid item xs={12} md={12} lg={12} sx={{mt:3}}>
                                    <InputLabel htmlFor="email-login-title3">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="requireSecurityCode"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid> */}
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { md: 'none', xl: 'none', lg: 'none' } }}>
                            <Grid container direction="column" alignItems="center">
                                <Grid item xs={12} md={12} lg={12} >
                                    <InputLabel htmlFor="email-login-title1">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="sentSecurityCode1"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} >
                                    <InputLabel htmlFor="email-login-title2">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="sentSecurityCode3"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} >
                                    <InputLabel htmlFor="email-login-title4">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="sentSecurityCode4"/>
                                        </Typography>
                                    </InputLabel>
                                </Grid>
                                {/* <Grid item xs={12} md={12} lg={12} sx={{mt:3}}>
                                    <InputLabel htmlFor="email-login-title3">
                                        <Typography variant="h5" >
                                            <FormattedMessage id="requireSecurityCode"/>
                                        </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 AfterForgotPasswordPage;