import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import { styles } from './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';

@inject('appstate')
@observer
class RegisterPage extends React.Component {
    state = {
        phone_number: "",
        email: "",
        password: "",
        confirmPassword: "",
        full_name: "",
        showPassword: false,
        showConfirmPassword: false,
        openDialog: false,
        isLoading: false,
        no_ktp: '',
        upload_ktp: '',
        upload_photo: '',
        address: '',
        province: '',
        city: '',
        district: '',
        sub_district: '',
        zip_code: '',

    };

    constructor(props) {
        super(props);
        this.authStore = props.appstate.auth;
        // this.global_ui = props.store.global_ui;
    }

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

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

    viewConfirmPassword = () => {
        this.setState({
            showConfirmPassword: !this.state.showConfirmPassword
        })
    };

    register = () => {
        this.setState({ isLoading: true });
        let data = {
            full_name: this.state.full_name,
            email: this.state.email,
            phone_number: this.state.phone_number,
            password: this.state.password
        }
        this.authStore.register(data).then(res => {
            setTimeout(() => {
                this.setState({ isLoading: false });
            }, 1000);
        }).catch(err => {
            this.setState({ isLoading: false });
        })
        // let rules = {
        //     full_name : {
        //         type : 'string',
        //         required : true,
        //         min : 3
        //     },
        //     phone_number : {
        //         type : 'string',
        //         required : true,
        //         min : 8
        //     },
        //     email : {
        //         type : 'email',
        //         required : true
        //     }
        // };
        // const validator = new schema(rules);
        // validator.validate(this.state, (errors, fields) => {
        //     if(errors) {
        //         this.global_ui.openAlert({
        //             type : 'error',
        //             title : startCase(errors[0].message),
        //             subtitle : 'Please validate the input'
        //         });
        //         return false;
        //     }
        //     this.global_ui.openLoader();
        //     setTimeout(()=>{
        //         this.global_ui.closeLoader();
        //         this.global_ui.openAlert({
        //             title : "Registration Succeed",
        //             subtitle : 'Thank you for register and enjoy your day',
        //             type : 'success'
        //         });
        //     },1000)
        // });
    };

    handleChangeUploadKtp = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({
                upload_ktp,
                loading: false,
            }));
        }
    }

    handleChangeUploadPhoto = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({
                upload_photo,
                loading: false,
            }));
        }
    }

    render() {
        const { classes } = this.props;
        const uploadButtonKtp = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload KTP</div>
            </div>
        );
        const uploadButtonPhoto = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload Photo</div>
            </div>
        );
        const upload_ktp = this.state.upload_ktp;
        const upload_photo = this.state.upload_photo;
        return (
            <div className={classes.container}>
                {/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}

                <Grid container spacing={0} className={classes.gridContainer}>
                    <Grid item xs={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}>
                        <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"}>
                                        Redeem point, Get Your Item!
                                    </Typography>
                                    <Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
                                        Get promo and benefits with 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>
                                        Register Now
                                    </Typography>
                                    <Typography variant="subtitle2" gutterBottom>
                                        Already have an account? <Link to={"/login"} replace>Back to Login</Link>
                                    </Typography>
                                    <div style={{
                                        display: 'flex',
                                        flexDirection: 'row'
                                    }}>
                                        <Grid container spacing={12}>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="name"
                                                    label="Full name"
                                                    value={this.state.full_name}
                                                    onChange={this.handleChange('full_name')}
                                                    margin="normal"
                                                    type={"text"}
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="phone"
                                                    label="Phone Number"
                                                    value={this.state.phone_number}
                                                    onChange={this.handleChange('phone_number')}
                                                    margin="normal"
                                                    type={"number"}
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>

                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="email"
                                                    label="Email"
                                                    value={this.state.email}
                                                    onChange={this.handleChange('email')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="ktp"
                                                    label="Nomor KTP"
                                                    value={this.state.ktp}
                                                    onChange={this.handleChange('ktp')}
                                                    margin="normal"
                                                    type={"number"}
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>

                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}>
                                                <Upload
                                                    name="avatar"
                                                    listType="picture-card"
                                                    className="avatar-uploader"
                                                    showUploadList={false}
                                                    action="//jsonplaceholder.typicode.com/posts/"
                                                    onChange={this.handleChangeUploadKtp}
                                                >
                                                    {upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
                                                </Upload>
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
                                                <Upload
                                                    style={{ marginTop: 16, marginBottom: 8 }}
                                                    name="avatar"
                                                    listType="picture-card"
                                                    className="avatar-uploader"
                                                    showUploadList={false}
                                                    action="//jsonplaceholder.typicode.com/posts/"
                                                    onChange={this.handleChangeUploadPhoto}
                                                >
                                                    {upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto}
                                                </Upload>
                                            </Grid>

                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="address"
                                                    label="Address"
                                                    value={this.state.address}
                                                    onChange={this.handleChange('address')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="province"
                                                    label="Province"
                                                    value={this.state.province}
                                                    onChange={this.handleChange('province')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>

                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="city"
                                                    label="City"
                                                    value={this.state.city}
                                                    onChange={this.handleChange('city')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="district"
                                                    label="District"
                                                    value={this.state.district}
                                                    onChange={this.handleChange('district')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>

                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="sub_district"
                                                    label="Sub district"
                                                    value={this.state.sub_district}
                                                    onChange={this.handleChange('sub_district')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="zip_code"
                                                    label="Zip Code"
                                                    value={this.state.zip_code}
                                                    onChange={this.handleChange('zip_code')}
                                                    margin="normal"
                                                    variant="outlined"
                                                    fullWidth
                                                />
                                            </Grid>

                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="password"
                                                    label="Password"
                                                    value={this.state.password}
                                                    onChange={this.handleChange('password')}
                                                    margin="normal"
                                                    type={this.state.showPassword ? 'text' : 'password'}
                                                    variant="outlined"
                                                    fullWidth
                                                    InputProps={{
                                                        endAdornment: (
                                                            <InputAdornment position="end">
                                                                <IconButton
                                                                    aria-label="Toggle password visibility"
                                                                    onClick={this.viewPassword}
                                                                >
                                                                    {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
                                                                </IconButton>
                                                            </InputAdornment>
                                                        ),
                                                    }}
                                                />
                                            </Grid>
                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
                                                <TextField
                                                    id="confirmPassword"
                                                    label="Re-type Password"
                                                    value={this.state.confirmPassword}
                                                    onChange={this.handleChange('confirmPassword')}
                                                    margin="normal"
                                                    type={this.state.showConfirmPassword ? 'text' : 'password'}
                                                    fullWidth
                                                    variant="outlined"
                                                    InputProps={{
                                                        endAdornment: (
                                                            <InputAdornment position="end">
                                                                <IconButton
                                                                    aria-label="Toggle password visibility"
                                                                    onClick={this.viewConfirmPassword}
                                                                >
                                                                    {this.state.showConfirmPassword ? <VisibilityOff style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} /> : <Visibility style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} />}
                                                                </IconButton>
                                                            </InputAdornment>
                                                        ),
                                                    }}
                                                />
                                            </Grid>
                                        </Grid>
                                    </div>


                                    <div style={{ padding: 5, marginTop: 20 }}>
                                        <Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register} disabled={this.state.full_name == '' || this.state.email == '' || this.state.password == '' || this.state.password != this.state.confirmPassword}>
                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
                                        </Button>
                                    </div>
                                </Paper>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        )
    }
}

export default withStyles(styles)(RegisterPage);