import React, { Component } from 'react';
import Images from '../assets/Images';
import { TextField, InputAdornment, Button, Typography, IconButton } from '@material-ui/core';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';


class ResetPassword extends Component {
    constructor(props) {
        super(props)
        this.state = {
            password: '',
            confirmPassword: '',
            showPass: false,
            showPass2: false,
        }
    }

    handleChange(e) {
      let data = this.state
      this.setState({...data, [e.target.name] : e.target.value})
    }
    render() {
        return (
          <div style={{ flex: 1, display: 'flex', backgroundColor: '#51c6ea', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
              <div style={{padding: 56, display: 'flex', flexDirection: 'column', width: 378, height: 415, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Images.tia}/>

                <TextField
                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Kata Sandi Baru *</Typography>}
                  id="password"
                  type={this.state.showPass ? 'text' : 'password'}
                  name={"password"}
                  value={this.state.password}
                  onChange={(password) => this.handleChange(password) }
                  variant="outlined"
                  error={false}
                  style={{ width: 250, height: 51, marginTop: 32 }}
                  helperText={<Typography style={{fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif'}}>Terdiri 8 karakter dengan kombinasi angka.</Typography>}
                  InputProps={{
                    endAdornment: <InputAdornment position="end">
                      <IconButton
                      aria-label="toggle password visibility"
                      style={{color: '#4b4b4b', opacity: 0.5}}
                      onClick={() => this.setState({showPass: !this.state.showPass})}
                      edge="end"
                    >
                      {this.state.showPass ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />}
                    </IconButton>
                    </InputAdornment>,
                  }}
                />

                <TextField
                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Ulangi Kata Sandi Baru *</Typography>}
                  id="confirmPassword"
                  type={this.state.showPass2 ? 'text' : 'password'}
                  name={"confirmPassword"}
                  value={this.state.confirmPassword}
                  onChange={(confirmPassword) => this.handleChange(confirmPassword) }
                  variant="outlined"
                  error={false}
                  style={{ width: 250, height: 51, marginTop: 38 }}
                  helperText={<Typography style={{fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif'}}>Terdiri 8 karakter dengan kombinasi angka.</Typography>}
                  InputProps={{
                    endAdornment: <InputAdornment position="end">
                      <IconButton
                      aria-label="toggle password visibility"
                      style={{color: '#4b4b4b', opacity: 0.5}}
                      onClick={() => this.setState({showPass2: !this.state.showPass2})}
                      edge="end"
                    >
                      {this.state.showPass2 ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />}
                    </IconButton>
                    </InputAdornment>,
                  }}
                />

                <Button variant="contained" style={{ marginTop: 50,  width: 250, height: 30, borderRadius: 4, backgroundColor: '#51c6ea' }}>
                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
                </Button>
              </div>
          </div>
        );
      }
}

export default ResetPassword;