import { Component, Event, getAssetPath, Prop, State, h } from '@stencil/core';
import { AuthService } from "../../services/auth/auth.service";
import { AuthStore } from '../../stores/auth.store';
export class PageLogin {
  constructor() {
    this.username = {
      valid: false,
      value: ''
    };
    this.password = {
      valid: false,
      value: ''
    };
    this.rememberMe = {
      valid: true,
      value: false
    };
    this.submitted = false;
  }
  handleUsername(ev) {
    this.validateUsername();
    this.username = Object.assign(Object.assign({}, this.username), { value: ev.target.value });
  }
  handlePassword(ev) {
    this.validatePassword();
    this.password.value = ev.target.value;
    this.password = Object.assign(Object.assign({}, this.password), { value: ev.target.value });
  }
  handleRememberMe(ev) {
    this.rememberMe = Object.assign(Object.assign({}, this.password), { value: ev.target.checked });
    console.log(this.rememberMe.value);
  }
  validateUsername() {
    if (this.username.value && this.username.value.length > 0) {
      this.username = Object.assign(Object.assign({}, this.username), { valid: true });
      return;
    }
    this.username = Object.assign(Object.assign({}, this.username), { valid: false });
  }
  validatePassword() {
    if (this.password.value && this.password.value.length > 0) {
      this.password.valid = true;
      this.password = Object.assign(Object.assign({}, this.password), { valid: true });
      return;
    }
    this.password = Object.assign(Object.assign({}, this.password), { valid: false });
  }
  async componentWillLoad() {
    this.destroyListener = AuthStore.onChange('authUser', async (authUser) => {
      this.notsignin = !authUser;
    });
    this.notsignin = !AuthStore.state.authUser;
  }
  disconnectedCallback() {
    if (this.destroyListener) {
      this.destroyListener();
    }
  }
  async onLogin(e) {
    e.preventDefault();
    //    const navCtrl: HTMLIonRouterElement = await (this.nav as any).componentOnReady();
    this.validatePassword();
    this.validateUsername();
    this.submitted = true;
    if (this.password.valid && this.username.valid) {
      //await UserData.login(this.username.value);
      let result = await AuthService.getInstance().authenticate({
        Email: this.username.value,
        Password: this.password.value,
        RememberClient: this.rememberMe.value
      });
      sessionStorage.setItem('rememberMe', this.rememberMe.value == true ? '1' : '0');
      this.userDidLogIn.emit({ loginStatus: true });
    }
  }
  async onSignup(e) {
    e.preventDefault();
    //const navCtrl: HTMLIonRouterElement = await (this.nav as any).componentOnReady();
    //navCtrl.push('/signup');
  }
  renderLogin() {
    return [
      h("div", null,
        h("div", { class: "login-logo" },
          h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
        h("form", { novalidate: "true", onSubmit: (e) => this.onLogin(e) },
          h("ion-list", { "no-lines": true },
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Username"),
              h("ion-input", { name: "username", type: "text", value: this.username.value, onInput: (ev) => this.handleUsername(ev), spellcheck: false, autocapitalize: "off", required: true })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.username.valid || this.submitted === false, class: "ion-padding-left" }, "Username is required")),
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Password"),
              h("ion-input", { name: "password", type: "password", value: this.password.value, onInput: (ev) => this.handlePassword(ev), required: true })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.password.valid || this.submitted === false, class: "ion-padding-left" }, "Password is required")),
            h("ion-item", { lines: "none" },
              h("ion-label", null, "Remember Me"),
              h("ion-checkbox", { slot: "start", checked: this.rememberMe.value, onIonChange: (e) => this.handleRememberMe(e) })),
            h("ion-item", { lines: "none" },
              h("stencil-route-link", { slot: "end", url: "/forgot-password", exact: true }, "Forgot Password?"))),
          h("ion-row", null,
            h("ion-col", null,
              h("ion-button", { type: "submit", expand: "block" }, "Log In"))),
          h("ion-item", { lines: "none" },
            h("span", null,
              " Not registered yet? ",
              h("stencil-route-link", { url: "/signup", exact: true }, "Sign Up")))))
    ];
  }
  render() {
    if (!this.notsignin) {
      return h("stencil-router-redirect", { url: "home" });
    }
    return this.renderLogin();
  }
  static get is() { return "sparkle-login"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-login.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-login.css"]
  }; }
  static get properties() { return {
    "history": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "RouterHistory",
        "resolved": "RouterHistory",
        "references": {
          "RouterHistory": {
            "location": "import",
            "path": "@stencil/router"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "notsignin": {},
    "username": {},
    "password": {},
    "rememberMe": {},
    "submitted": {}
  }; }
  static get events() { return [{
      "method": "userDidLogIn",
      "name": "userDidLogIn",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
