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";
import { FormattedMessage } from "react-intl";
import { LoadingService } from "../../../../Services/LoadingService";

const loginbg = require('../../../../Assets/images/test/logo.png');

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

  state = {
    tenant: 1,
    username: "",
    password: "",
    shouldRedirect: false,
    value: ""
  };

  componentDidMount() {
    this._loadingService.hide();
  }
  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) => {
        console.log(response);
        if (response.data && response.data.positions && response.data.positions.length > 0 && response.data.positions[0].organizationUnit)
          response.data.department = response.data.positions[0].organizationUnit.id

        this._cachingService.store("Token", response.data ? response.data.token : '');
        this._cachingService.store('UserId', response.data ? response.data.id : '');
        this._cachingService.store('LoggedInUser', response.data ? response.data : {});
        this.setState({ shouldRedirect: true });
      })
      .catch(function (error) {
        alert(error);
      });
  };
  _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="login-bg-container">
              <Image
                src={String(loginbg)}
                alt=""
                className="login-img-bg"
              />
            </div>
            <div className="ms-Grid grid-max-width">
              <div className="ms-Grid-row">
                <div className="ms-Grid-col ms-sm12">
                  {/* <header className="Login-header">
              <img src='../../../logo.svg' className="Login-logo" alt="logo" />
              <h1 className="Login-title">DivCraft Low Code Development Framwork</h1>
            </header> */}
                  <div className="middle">
                    <div className="login-img-container">
                      {/* <img src="/images/login-bg.jpg" alt="" /> */}
                      <Image
                        src={String(loginbg)}
                        alt=""
                        className="login-img-small"
                      />
                    </div>
                    <div className="inner">
                      <span className="text-title">
                        {" "}
                        <Image
                          src="/images/logo.png"
                          alt=""
                          width={280}
                          height={60}
                          className="login-logo hidden-sm"
                        />
                        <Image
                          src="/images/logo_sm.png"
                          alt=""
                          width={32}
                          height={60}
                          className="login-logo hidden-lg"
                        />
                      </span>

                      <div 
                       style={this._cachingService.readPersistant('Language') == 0 ? {"textAlign":"left"} : {"textAlign":"right"}}
                       className="text-title"><FormattedMessage id="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
                          style={this._cachingService.readPersistant('Language') == 0 ? {"textAlign":"left"} : {"textAlign":"right"}}
                          value={this.state.username}
                          onChanged={this._handleUserNameChange.bind(this)}
                          placeholder={this._cachingService.readPersistant('Language') == 0 ? "User Name" : "اسم المستخدم"}
                          required
                        />
                      </div>
                      <div style={{ marginTop: 10 }}>
                        <TextField
                          type="password"
                          value={this.state.password}
                          underlined
                          style={this._cachingService.readPersistant('Language') == 0 ? {"textAlign":"left"} : {"textAlign":"right"}}
                          onChanged={this._handlePasswordChange.bind(this)}
                          placeholder={this._cachingService.readPersistant('Language') == 0 ? "Password" : "كلمة المرور"}
                          required
                        />
                      </div>
                      <div className="loginButton">
                        <DefaultButton
                          primary={true}
                          data-automation-id="test"
                          type="submit"
                          allowDisabledFocus={true}
                        >
                          <FormattedMessage id="Login" />
                        </DefaultButton>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      );
  }
}

export default Login;
