import React, { Component, Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { connect } from 'react-redux';
import { requestConfirmationAccountRequest } from '../actions/user';
import Loader from './../components/templates/loader'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button';
import LayoutBack from '../components/templates/LayoutBack';
import Router from 'next/router';
import Head from 'next/head'

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


class ConfirmAccount extends Component {
    state = {

        errors: {},
        loading: false,

    };
    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            errors: nextProps.errors,
            loading: nextProps.loading,

        })
    }
    render() {

        const { classes } = this.props
        const { loading } = this.state
        return (
            <LayoutBack text="Validation" height="fixed">
            <Head>
                <title key="title">Confirmation de compte</title>
                <meta key="robots" name="robots" content="noindex, nofollow"></meta>
            </Head>
                <div className={classes.container}>
                    {loading && (
                        <Loader />
                    )}
                    {!loading && (
                        <Fragment>
                            <Typography gutterBottom align="center" className={classes.title}>
                                e-mail validé
                            </Typography>
                            <Typography gutterBottom align="left" className={classes.text}>
                                Votre email a bien été validé. 
                                
                            </Typography>
                            <Typography gutterBottom align="left" className={classes.text}>
                                Vous pouvez maintenant vous connecter.
                                <Button
                                    variant="contained"
                                    className={classes.button}
                                    classes={{ root: classes.rootButton }}
                                    onClick={() => Router.push('/Login')}
                                >
                                    Connexion
                                </Button>

                            </Typography>
                            <section className={classes.bottomContainer}>
                                <Button
                                    variant="contained"
                                    className={classes.button}
                                    classes={{ root: classes.rootButton }}
                                    onClick={() => Router.push('/Login')}
                                >
                                    Connexion
                            </Button>
                            </section>
                        </Fragment>
                    )}
                </div>
            </LayoutBack>
        )
    }
}



function mapStateToProps(state, ownProps) {
    return {
        loading: !!state.user.loading,
        errors: state.user.errors
    };
}

ConfirmAccount.getInitialProps = function (context) {
    const { token, email } = context.query
    //localStorage.setItem('loginRedirect', url)
    context.store.dispatch(requestConfirmationAccountRequest({ 'confirmationToken': token, 'email': email }))
    return email;
}


export default withStyles(styles)(connect(mapStateToProps, { requestConfirmationAccountRequest })(ConfirmAccount));