import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import { styles } from '../RegisterNew/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import Button from '@material-ui/core/Button';
import Hidden from '@material-ui/core/Hidden';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import CircularProgress from '@material-ui/core/CircularProgress';
import Snackbar from '@material-ui/core/Snackbar';

import { Link } from 'react-router-dom'
import { inject, observer } from "mobx-react";
import schema from 'async-validator'
import { startCase } from 'lodash';
import { Upload, Icon, message } from 'antd';

import AutoComplete from './../../components/AutoComplete';
import {appConfig} from "../../config/app";
import {LINKS} from "../../routes";

// const province = require("./../../../../assets/data/province.json");
// const city = require("./../../../../assets/data/city.json");
// const district = require("./../../../../assets/data/district.json");
// const subdistrict = require("./../../../../assets/data/subdistrict.json");

@inject('appstate')
@observer
class ResendEmail extends React.Component {
    state = {
        showPassword: false,
        showConfirmPassword: false,
        openDialog: false,
        isLoading: false,

        // form
        email: "",
    };

    constructor(props) {
        super(props);
        this.authStore = props.appstate.auth;
        this.http = props.appstate.http;
    }

    componentDidMount() {

    }

    handleChange = name => event => {
        this.setState({
            [name]: event.target.value,
        });
    };

    send = () => {

        this.setState({ isLoading: true });

        let data = {
            email: this.state.email,
        };
        this.authStore.resendEmail(data).then(res => {
            //message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
            setTimeout(() => {
                this.setState({ isLoading: false });
              this.props.history.push(LINKS.REGISTER_COMPLETED);
            //     this.props.history.push(LINKS.LOGIN);
            }, 250);
        }).catch(err => {
            this.setState({ isLoading: false });

            if (err.type === 'BodyValidationError') {
              message.error(err.detail[0].message);
            } else {
              message.error(err.message);
            }
        });
    };

    render() {
        const { classes } = this.props;

        return (
            <div className={classes.container}>

                <Grid container spacing={0} className={classes.gridContainer}>
                    <Grid item cols={12} className={classes.logoContainer}>
                        <img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
                    </Grid>
                    <Grid item xs={12} sm={12} md={10} lg={10} className={classes.registerContainer} style={{
                      alignSelf: 'center'
                    }}>
                        <Grid container spacing={24} className={classes.registerPaper}>
                            <Hidden smDown>
                                <Grid item xs={5}>
                                    <img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
                                    <Typography style={{ color: '#FFF' }} variant={"h6"}>
                                        Tukarkan point!
                                    </Typography>
                                    <Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
                                        Dapatkan promo dan keuntungan dengan BTN
                                    </Typography>
                                </Grid>
                            </Hidden>
                            <Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}>
                                <Paper className={classes.formRegister}>
                                    <Typography variant="h6" gutterBottom>
                                        Kirim Ulang Email
                                    </Typography>
                                    <Grid item xs={12} sm={12} md={12}>
                                        <TextField
                                            id="email"
                                            label="Email"
                                            value={this.state.email}
                                            onChange={this.handleChange('email')}
                                            margin="normal"
                                            variant="outlined"
                                            fullWidth
                                        />
                                    </Grid>

                                    <div style={{ padding: 5, marginTop: 20 }}>
                                        <Button
                                          fullWidth
                                          variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.send}>
                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Kirim"}
                                        </Button>
                                    </div>
                                </Paper>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        )
    }
}

export default withStyles(styles)(ResendEmail);
