import * as React from "react";
import './Login.css';
import { LoginRequest } from '../../../../Models';
import { SecurityService, CachingService } from '../../../../Services';
import { Redirect } from "react-router-dom"
import { DefaultButton } from "office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton";
import { TextField } from "office-ui-fabric-react/lib/components/TextField/TextField";
import { Image } from 'office-ui-fabric-react/lib/Image';

export class Login extends React.Component {
  _cachingService: CachingService = new CachingService();
  _securityService: SecurityService = new SecurityService();

  state = { tenant: '', username: '', password: '', shouldRedirect: false, value: "" };
  private handleSubmit = (event: any) => {
    event.preventDefault();
    this._cachingService.store('TenantId', this.state.tenant);
    this._cachingService.store('Language', 0);

    let request: LoginRequest = new LoginRequest();
    request.username = this.state.username;
    request.password = this.state.password;

    this._securityService.login(request)
      .then((response: any) => {
        this._cachingService.store('Token', response.data);
        this._cachingService.store('UserId', response.data ? response.data.id : '');
        this._cachingService.store('UserName', response.data ? response.data.name : '');
        this.setState({ shouldRedirect: true });
      })
      .catch(function (error) {
        alert(error.response.data);
      });
  };
  _handleTenantChange(value: any) {
    this.state.tenant = value;
  };
  _handleUserNameChange(value: any) {
    this.state.username = value;
  };
  _handlePasswordChange(value: any) {
    this.state.password = value;
  };
  render() {
    return (
      this.state.shouldRedirect ?
        <Redirect to="/" push /> :
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div className="Login">

            <div className="middle">
              <div className="inner">
                <span className="text-title">
                  <Image
                    src="/images/logo.png"
                    alt="Example implementation with no image fit property and only width is specified."
                    width={115}
                    height={60}
                  />
                </span>
                <div className="text-title">Login</div>

                <div style={{ marginTop: 10 }}>
                  <TextField type="text" autoComplete="on" underlined value={this.state.tenant} onChanged={this._handleTenantChange.bind(this)} placeholder="tenant" required />
                </div>
                <div style={{ marginTop: 10 }}>
                  <TextField type="text" autoComplete="on" underlined value={this.state.username} onChanged={this._handleUserNameChange.bind(this)} placeholder="User Name" required />
                </div>
                <div style={{ marginTop: 10 }}>
                  <TextField type="password" value={this.state.password} underlined onChanged={this._handlePasswordChange.bind(this)} placeholder="Password" required />
                </div>
                <div className="loginButton">
                  <DefaultButton
                    primary={true}
                    data-automation-id="test"
                    type="submit"
                    text="Login"
                    allowDisabledFocus={true}
                  />
                </div>
              </div>
            </div>
          </div>
        </form>
    );
  }
}

export default Login;
