import React, { Component } from 'react';
import Images from '../assets/Images';
import { Checkbox, Button, InputAdornment, TextField, InputLabel, Typography, IconButton } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import api from '../api';
import Constant from '../library/Constant';

const CustomCheckbox = withStyles({
  root: {
    color: '#51c6ea',
    '&$checked': {
      color: '#51c6ea',
    },
  },
  checked: {},
})((props) => <Checkbox color="default" {...props} />);

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

  componentDidMount() {
    // this.coba()
  }

  handleChange(e) {
    let data = this.state
    this.setState({...data, [e.target.name] : e.target.value})
  }

  login() {
    let payload = {
      "username": this.state.username,
      "password": this.state.password
  }
    api.create().login(payload).then((response) => {
      if (response.data.status === 'success') {
        this.props.history.push('/home/beranda')
        localStorage.setItem(Constant.TOKEN, response.data.data.token)
      } else {
        alert(response.data.message)
      }
    })
  }

  render() {
    return (
      <div style={{ flex: 1, display: 'flex' }}>
        <div style={{ width: '50%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
          <img src={Images.tia} />
          <img src={Images.imageLogin} style={{ marginTop: 30 }} />
        </div>
        <div style={{ width: '50%', height: '100vh', backgroundColor: '#51c6ea', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
          <div style={{ paddingTop: 56, paddingLeft: 64, paddingRight: 64, display: 'flex', flexDirection: 'column', width: 378, height: 431, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
            <img src={Images.tia} />

            <TextField
              label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Username/Email *</Typography>}
              id="username"
              type={"text"}
              name={"username"}
              value={this.state.username}
              onChange={(username) => this.handleChange(username)}
              variant="outlined"
              error={false}
              style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}
              helperText=""
              InputProps={{
                endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
              }}
            />

            <TextField
              label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Kata Sandi *</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: 20 }}
              helperText=""
              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>,
              }}
            />

            <div style={{ flexDirection: 'row', width: '100%', marginTop: 16 }}>
              <CustomCheckbox name="checked-remember" />
              <span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Remember Me</span>
              <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Lupa Kata Sandi?</span>
            </div>
            <Button name="submit" variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }}>
              <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Login</Typography>
            </Button>
          </div>
        </div>
      </div >
    );
  }
}

export default Login;
