import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import {styles} from '../Register/registerStyle';
import {notification} from 'antd';

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 Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
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 {LINKS} from "../../routes";

@inject('appstate')
@observer
class BTNLoginPage extends React.Component{

    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
          email: "",
          password: "",
          showPassword : false,
          isLoading: false,
          loginFailed: false,
          isNeedEmailVerification: false,
        };
        this.defaultState = Object.assign({}, this.state);
        this.authStore = props.appstate.auth;
      }

  componentDidMount() {
    const urlParams = new URLSearchParams(window.location.search);

    if(urlParams.has('key')) {
      this.setState({
        isLoading: true
      });

      this.authStore.verifyEmail(urlParams.get('key')).then((res) => {
        if(res.login_request_id) {
          notification.open({
            message: 'Email Verification',
            description: 'Email verification success'
          });
          this.setState({
            isLoading: false
          });
          //redirect to otp page
        } else {
          notification.open({
            message: 'Email Verification',
            description: res.message
          });
          this.setState({
            isLoading: false
          });
          // res.message
        }
      })
    }
  }

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

    viewPassword = ()=>{
        this.setState({
            showPassword : !this.state.showPassword
        })
    };

    login = () => {
        this.setState({isLoading:true});
        const email = this.state.email;
        const password = this.state.password;
        const data = {
            username: email,
            password: password,
        }
        this.authStore.login(data).then(res => {
            console.log("res login",res);
            if(res.state == "verified"){
                setTimeout(()=>{
                    this.props.history.push(LINKS.DASHBOARD);
                    this.setState({isLoading:false});
                },1000);
            }
            else if(res.state == "email_verification"){
                this.setState({isNeedEmailVerification:true,isLoading:false});
            }
        }).catch(err => {
            console.log("err login",err);
            this.setState({loginFailed:true,isLoading:false});
            setTimeout(()=>this.setState({loginFailed:false}),3000);
        });
      };

    render(){
        const { classes } = this.props;
        return (
            <div className={classes.container}>
                {/* <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                    >
                    <DialogTitle id="alert-dialog-title">{"Information"}</DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            Wrong Username or Password
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary" autoFocus>
                            OK
                        </Button>
                    </DialogActions>
                </Dialog> */}
                <Snackbar
                    anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
                    open={this.state.loginFailed}
                    onClose={()=>this.setState({loginFailed:false})}
                    ContentProps={{
                        'aria-describedby': 'message-id',
                    }}
                    message={<span id="message-id">Wrong username or password</span>}
                />
                <Grid container spacing={0} className={classes.gridContainer}>
                    <Grid item xs={12} className={classes.logoContainer}>
                        <img src={require('../../../../assets/images/login/logo_new.png')} className={classes.logo} />
                    </Grid>
                    <Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
                        <Grid container spacing={24} className={classes.registerPaper}>
                            <Hidden smDown>
                                <Grid item xs={6}>
                                    <img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
                                        Welcome to BTN Points
                                    </Typography>
                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
                                        Sign in to get various voucher and items
                                    </Typography>
                                </Grid>
                            </Hidden>
                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
                                {
                                    this.state.isNeedEmailVerification &&
                                        <Paper className={classes.formRegister}>
                                            <Typography variant="h6" gutterBottom>
                                                Your account still need email verification
                                            </Typography>
                                            <Typography variant="subtitle2" gutterBottom>
                                                Still not received any email? <Link to={"/register"}>Resend email</Link>
                                            </Typography>

                                            <div style={{padding : 5,marginTop : 20}}>
                                                <Button onClick={() => this.setState({isNeedEmailVerification : false})} fullWidth variant="contained" style={{background:'#ffeb3b'}}>
                                                    Back to Login
                                                </Button>
                                            </div>
                                        </Paper>
                                }

                                {
                                    !this.state.isNeedEmailVerification &&
                                        <Paper className={classes.formRegister}>
                                            <Typography variant="h6" gutterBottom>
                                                Login to BTN Point
                                            </Typography>
                                            <Typography variant="subtitle2" gutterBottom>
                                                Doesn't have an account? <Link to={"/register"}>Register</Link>
                                            </Typography>
                                            <TextField
                                                id="email"
                                                label="Email"
                                                value={this.state.email}
                                                onChange={this.handleChange('email')}
                                                margin="normal"
                                                variant="outlined"
                                            />
                                            {/*<div style={{display : 'flex',alignItems : 'center'}}>*/}
                                            <TextField
                                                id="password"
                                                label="Password"
                                                value={this.state.password}
                                                onChange={this.handleChange('password')}
                                                margin="normal"
                                                type={this.state.showPassword ? 'text' : 'password'}
                                                fullWidth
                                                variant="outlined"
                                                InputProps={{
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <IconButton
                                                                aria-label="Toggle password visibility"
                                                                onClick={this.viewPassword}
                                                            >
                                                                {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
                                                            </IconButton>
                                                        </InputAdornment>
                                                    ),
                                                }}
                                            />
                                            <div style={{padding : 5,marginTop : 20}}>
                                                <Button onClick={() => this.login()} fullWidth variant="contained" style={{background:'#ffeb3b'}} disabled={this.state.email == '' || this.state.password == ''}>
                                                    {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign In"}
                                                </Button>
                                            </div>
                                        </Paper>
                                }

                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        )
    }
}

export default withStyles(styles)(BTNLoginPage);