import { Component, State, Prop, Host, getAssetPath, h } from '@stencil/core';
import { AccountService } from "../../services/account.service";
import { AuthStore } from '../../stores';
export class SparkleResetPassword {
  constructor() {
    this.formControls = {
      password: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
      confirmPassword: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
    };
    this.submitted = false;
  }
  componentDidLoad() {
    console.log(this.history.location.query.code);
    console.log(this.history.location.query.email);
  }
  changeFormValue(controlName, value) {
    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value) }) });
  }
  async handleSubmit(e) {
    e.preventDefault();
    this.submitted = true;
    let isFormValid = true;
    //Run all validation functions
    for (let controlName in this.formControls) {
      let control = this.formControls[controlName];
      control.validate(control.value);
      if (!control.isValid) {
        isFormValid = false;
      }
    }
    if (isFormValid) {
      let result = await AccountService.getInstance().resetPassword({
        Email: this.history.location.query.email,
        Token: this.history.location.query.code,
        Password: this.formControls.password.value,
        ConfirmPassword: this.formControls.confirmPassword.value,
      });
      if (result.Succeeded) {
        this.history.replace('/login', {});
      }
      else if (result.Failed) {
        if (result.Errors.length > 0) {
          this.validationErrors = result.Errors;
        }
      }
    }
  }
  render() {
    return (h(Host, null,
      h("div", { class: "login-logo" },
        h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
      h("sparkle-validation-error", { errors: this.validationErrors }),
      h("form", { novalidate: "true", onSubmit: (e) => this.handleSubmit(e) },
        h("ion-item", null,
          h("ion-label", { position: "stacked", color: "primary" }, "Password"),
          h("ion-input", { name: "password", type: "password", value: this.formControls.password.value, onInput: (ev) => this.changeFormValue("password", ev.target.value) })),
        h("ion-text", { color: "danger" },
          h("p", { hidden: this.formControls.password.isValid || this.submitted === false, class: "ion-padding-start" }, "Password is required")),
        h("ion-item", null,
          h("ion-label", { position: "stacked", color: "primary" }, "Confirm Password"),
          h("ion-input", { name: "confirmPassword", type: "password", value: this.formControls.confirmPassword.value, onInput: (ev) => this.changeFormValue("confirmPassword", ev.target.value) })),
        h("ion-text", { color: "danger" },
          h("p", { hidden: this.formControls.confirmPassword.isValid || this.submitted === false, class: "ion-padding-start" }, "Confirm Password is required")),
        h("br", null),
        h("div", { class: "ion-padding" },
          h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
            AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
            " Reset Password")))));
  }
  static get is() { return "sparkle-reset-password"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-reset-password.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-reset-password.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 {
    "validationErrors": {},
    "formControls": {},
    "submitted": {}
  }; }
}
