import React, { Component } from 'react'
import { withStyles } from '@material-ui/core/styles'
import Layout from '../components/templates/LayoutBack'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button';
import Router from 'next/router';
import Head from 'next/head'

const styles = theme => ({
    container: {
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        height: '100%',
        padding: theme.spacing(1, 3),
    },
    bottomContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignSelf: 'center',
        justifyContent: 'center',
        position: 'absolute',
        bottom: 0,
        width: '100%',
    },
    title: {
        fontFamily: 'Dosis',
        fontSize: '1.5em',
        fontWeight: '600',
        padding: theme.spacing(3, 0),
    },
    text: {
        fontSize: '1em',
        fontWeight: '300',
        padding: theme.spacing(1, 0),
    },
    email: {
        fontWeight: '500',
    },
    bottomText: {
        fontWeight: '500',
    },
    button: {
        textTransform: 'inherit',
        marginTop: theme.spacing(4),
        marginBottom: theme.spacing(2),
        marginRight: 'auto',
        marginLeft: 'auto',
        padding: theme.spacing(1.2, 1),
        borderRadius: '3px',
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.primary.important,
    },

});
class VerifyEmail extends Component {
    render() {
        const { classes, email } = this.props;
        return (
            <Layout text="Inscription" height="fixed">
                <Head>
                    <title key="title">Vérification d'email</title>
                    <meta key="robots" name="robots" content="noindex, nofollow"></meta>
                </Head>
                <div className={classes.container}>
                    <Typography gutterBottom align="center" className={classes.title}>
                        Consultez vos e-mails
                    </Typography>
                    <Typography gutterBottom align="left" className={classes.text}>
                        Un e-mail a été envoyé à l'adresse <span className={classes.email}>{email}</span>
                    </Typography>
                    <Typography gutterBottom align="left" className={classes.text}>
                        Cliquez sur le lien dans l'e-mail que nous vous avons envoyé pour activer votre compte.
                    </Typography>
                    <Typography gutterBottom align="left" className={classes.text}>
                    N'oubliez pas de consulter vos spams, si vous ne trouvez pas le lien d'activation dans votre boite de réception.
                    </Typography>
                    <section className={classes.bottomContainer}>
                        {/* <Typography gutterBottom align="center" className={classes.bottomText}>
                            Cliquez sur suivant pour continuer votre candidature
                        </Typography>
                        <Button
                            variant="contained"
                            className={classes.button}
                            classes={{ root: classes.rootButton }}
                            onClick={() => Router.push('/Login')}
                        >
                            Suivant
                        </Button> */}
                    </section>
                </div>
            </Layout>
        )
    }
}

VerifyEmail.getInitialProps = async function (context) {
    const { email } = context.query;
    console.log("email")
    console.log(email)
    return { email }
}

export default withStyles(styles)(VerifyEmail)