// material-ui
import { Button, Grid } from '@mui/material';
import { Link } from 'react-router-dom';
import Typography from '@mui/material/Typography';
// import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
// import banner from 'assets/images/bg_ml.jpg';
import { Stack } from '../../../node_modules/@mui/material/index';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { GET_VERIFY_USER_ACCOUNT } from 'utils/ApiPathConst';
import Loadable from 'components/Loadable';
import { lazy } from 'react';

const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import {FormattedMessage} from "react-intl";

export default function Verify() {

    const [isLoading, setIsLoading] = useState(true)
    /** null: loading; true: verified; false: API returned false (informational); 'error': network or unexpected */
    const [verifyState, setVerifyState] = useState(null)
    const [enterUseEffect, setEnterUseEffect] = useState(false)

    const params = useParams()
    const handleVerify = async () => {
        // console.log("handleVerify()");
        await axios.get(GET_VERIFY_USER_ACCOUNT, {
            params: {
                email: decodeURIComponent(params.email),
                emailVerifyHash: decodeURIComponent(params.verifyCode)
            }
        }        ).then(
            (response)=>{
                // Same idea as forgot-password: only strict true = success. Any other 200 (false, null,
                // or link already consumed so hash no longer matches) = informational, not failure.
                if (response.status === 200 && response.data === true) {
                    setVerifyState(true)
                } else if (response.status === 200) {
                    setVerifyState(false)
                } else {
                    setVerifyState('error')
                }
                setIsLoading(false)
            }
        ).catch(error => {
            console.log(error)
            setVerifyState('error')
            setIsLoading(false)
        });
        
    }

    useEffect(() => {
        // console.log("setEnterUseEffect(true)");
        setEnterUseEffect(true)
    }, [])

    useEffect(() => {
        // console.log("if (enterUseEffect) handleVerify()");
        if (enterUseEffect) handleVerify()
    }, [enterUseEffect])


    return (
        <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px' }} alignItems="center">
            <AuthWrapper>
                {isLoading || verifyState == null ?
                    <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                        <Grid item>
                            <LoadingComponent />
                        </Grid>
                    </Grid> :
                    <Grid item xs={12}>
                        {verifyState === true ?
                            // SUCCESS page
                            <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                <Typography display="inline" variant="h4">
                                    <FormattedMessage id="verifySuccess"/>
                                </Typography>
                                <Button variant="outlined" component={Link} to="/login">
                                    <Typography variant="h5">
                                        <FormattedMessage id="backToLogin"/>
                                    </Typography>
                                </Button>
                            </Stack>
                            : verifyState === false ?
                            // Informational (verification not completed via this link)
                            <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                <InfoOutlinedIcon color="info" sx={{ width: "200px", height: "200px" }} />
                                <Typography display="inline" variant="h4" sx={{ textAlign: 'justify' }}>
                                    <FormattedMessage id="verifyInfo"/>
                                </Typography>
                                <Button variant="outlined" component={Link} to="/login" color="primary">
                                    <Typography variant="h5">
                                        <FormattedMessage id="backToLogin"/>
                                    </Typography>
                                </Button>
                            </Stack>
                            :
                            // ERROR page (network / server error)
                            <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
                                <Typography display="inline" variant="h4" sx={{textAlign: 'justify'}}> 
                                    <FormattedMessage id="verifyFail"/>
                                </Typography>
                                <Button color="error" variant="outlined" component={Link} to="/login">
                                    <Typography variant="h5">
                                        <FormattedMessage id="backToLogin"/>
                                    </Typography>
                                </Button>
                            </Stack>
                        }
                    </Grid>
                }
            </AuthWrapper>
        </Stack>
    )
}