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'
import { TextField } from '@material-ui/core';
const styles = theme => ({
    root: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start',
        margin: theme.spacing(1),
      },
    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: 'Roboto',
        fontSize: '1.625em',
        fontWeight: '600',
        padding: theme.spacing(3, 0),
    },
    text: {
        fontFamily: 'Roboto',
        width:"400px",
        fontSize: '1em',
        fontWeight: '300',
        padding: theme.spacing(1, 0),
    },
    textSpam:{
        fontFamily: 'Roboto',
        width:"400px",
        fontSize: "1em",
        fontWeight: "500",
        padding: theme.spacing(1, 0),
    },
    email: {
        fontWeight: '500',
    },
    bottomText: {
        fontWeight: '500',
    },

    iconButton:{
        marginTop: "50px",

        [theme.breakpoints.down('md')]: {
            marginTop: "50px",
            
        },
    },
    textContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',

    },
    notUnderline:{
        textDecoration :'none'
    },
    rootButton: {
        '&:hover': {
          backgroundColor: theme.palette.primary.important + '!important',
        },
      },
    button: {
        textTransform: 'inherit',
        marginLeft: theme.spacing(8),
        marginRight: theme.spacing(8),
        marginTop: theme.spacing(4),
        marginBottom: theme.spacing(2),
        padding: theme.spacing(1.2, 2),
        borderRadius: '3px',
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.primary.important,
        [theme.breakpoints.up('sm')]: {
            margin: 'auto',
        },
    },
    buttonImportant: {
        marginTop: theme.spacing(6),
    },
      champEmail:{
          width:'400px'
      }

});
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.root}>
                    <div className={classes.textContainer}>
                        <img
                            alt="talents-tube"
                            src='/statique/images/inscription/inscription-plateforme-recrutement-video.svg'
                            className={classes.iconButton}/>
                        <Typography gutterBottom align="center" className={classes.title}>
                            Consultez vos e-mails 
                        </Typography>
                        <Typography gutterBottom align="left" className={classes.text}>
                            Cliquez sur le lien dans l’email que nous vous avons envoyé pour activer votre compte Talent. Vous pourrez ensuite vous connecter.

                        </Typography>
                        <TextField
                        value={email}
                        className={classes.champEmail}
                        id="emailVerif"
                        name="emailVerif"
                        label="Email"
                        margin="normal"
                        variant="outlined"
                        InputProps={{
                            readOnly: true,
                          }}
                        
                        />
                        <Typography  align="center" className={classes.textSpam}>
                        Vous n'avez pas reçu l'email ? Pensez à consulter vos spams
                        </Typography>
                        <a
                        href={`/Login`}
                        variant="contained"
                        className={classes.notUnderline}
                        
                        >
                            <Button variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonConnexion'}>
                                                    Se connecter
                            </Button>
                        </a>
                    </div>
                    <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)