// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button
} from '@mui/material';
import * as React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useLocation } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

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

const Index = () => {
    const intl = useIntl();
    const location = useLocation();
    const navigate = useNavigate()
    const [onReady, setOnReady] = React.useState(false);
    const showAccountLinkUpMessages = location?.state?.iAmSmartNewlyLinked === true;

    React.useEffect(() => {
        if ("iAmSmart" == location?.state?.loginMethod) {
            setOnReady(true);
        } else {
            //setOnReady(true);
            navigate('/dashboard');
        }
    }, []);

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                <Grid item xs={12} width="100%">
                    <div style={BackgroundHead} width="100%">
                        <Stack direction="row" height='70px'>
                            <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
                                <FormattedMessage id={showAccountLinkUpMessages ? 'loginSuccessMessage1' : 'login'} />
                            </Typography>
                        </Stack>
                    </div>
                </Grid>
                {/*row 1*/}
                <Grid item xs={12} md={12}>
                    <Stack alignItems="center" sx={{ width: '100%', px: 2 }}>
                        <CheckCircleOutlineIcon color="success" sx={{ width: '200px', height: '200px' }} />
                        {showAccountLinkUpMessages ? (
                            <Typography
                                component="div"
                                variant="h3"
                                sx={{ mt: 4, maxWidth: 900, textAlign: 'center' }}
                                dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'loginSuccessMessage2' }) }}
                            />
                        ) : (
                            <Typography component="div" variant="h3" sx={{ mt: 4, maxWidth: 900, textAlign: 'center' }}>
                                <FormattedMessage id="iAmSmartLoginSuccessHeading" />
                            </Typography>
                        )}
                    </Stack>
                </Grid>
                {/*row 2*/}
                <Grid item xs={12} md={12}>
                    <Stack alignItems="center" sx={{ width: '100%' }}>
                        <Button
                            component="span"
                            variant="contained"
                            size="large"
                            sx={{ m: 4 }}
                            onClick={() => {
                                navigate("/dashboard");
                            }}
                        >
                            <FormattedMessage id="loginSuccessMessage3" />
                        </Button>
                    </Stack>
                </Grid>
            </Grid >


    );
};

export default Index;
