import React from 'react';
import {TextField, RaisedButton} from 'material-ui';
import {inject, observer} from 'mobx-react';
import './style.scss'
import {LINKS} from "../../routes";
import {APP_TYPE} from "../../config/app";


@inject('appstate')
@observer
export default class LoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      username: "",
      password: "",
    };
    this.defaultState = Object.assign({}, this.state);
    this.authStore = props.appstate.auth;
  }

  componentDidMount() {

  }

  login = () => {
    const username = this.state.username;
    const password = this.state.password;
    const data = {
      username: username,
      password: password,
    }
    this.authStore.login(data).then(res => {
      this.props.history.push(LINKS.DASHBOARD);
    }).catch(err => {
      alert(err.message);
    });
  };

  register = () => {
    this.props.history.push(LINKS.REGISTER);
  }

  render() {

    let loginImage = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
    if(APP_TYPE === 'btn') {
      loginImage = 'https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg'
    }
    return (
      <div className="loginWrapper">
        <div className={'formContainer'}>
          <img className={'logoLogin'} src={loginImage} />
          <p className={'textLogin'}>Login into our System</p>

          <div className={'formParent'}>
            <div className={'inputContainer'}>
              <input
                className={'usernameForm'}
                placeholder="Username"
                onChange={(e) => this.setState({username: e.target.value})}
              />
              <input
                className={'passwordForm'}
                placeholder="Password"
                onChange={(e) => this.setState({password: e.target.value})}
                type="password"
              />
            </div>

            <button onClick={() => this.login()} className={'buttonLogin'}>
              Sign In
            </button>
          </div>
          <div style={{marginTop:12,display:'flex',flexDirection:'row'}}>
              <a onClick={()=> this.register()} style={{fontWeight:20,fontSize:14}}>Does not have account yet? Let's create your account now!</a>
            </div>
        </div>
      </div>
    )
  }
}