import { Component, State, Prop, h, getAssetPath } from '@stencil/core';
import { AccountService } from "../../services/account.service";
import { AuthStore } from '../../stores';
export class SparkleForgotPassword {
  constructor() {
    this.formControls = {
      email: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
    };
    this.submitted = false;
  }
  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().forgotPassword({
        Email: this.formControls.email.value,
        ClientURL: window.location.origin + "/reset-password"
      });
      if (result.Succeeded) {
        this.history.replace('/login', {});
      }
      else if (result.Failed) {
        if (result.Errors.length > 0) {
          this.validationErrors = result.Errors;
        }
      }
    }
  }
  render() {
    return [
      h("div", 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-list", { "no-lines": true },
            h("ion-item", { lines: "none" }, "Enter your email address and we will send you a link to reset your password."),
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Email"),
              h("ion-input", { name: "email", type: "text", value: this.formControls.email.value, onInput: (ev) => this.changeFormValue("email", ev.target.value), spellcheck: false, autocapitalize: "off" })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.formControls.email.isValid || this.submitted === false, class: "ion-padding-left" }, "Email 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" }),
                " SEND PASSWORD RESET EMAIL")))))
    ];
  }
  static get is() { return "sparkle-forgot-password"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-forgot-password.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-forgot-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": {}
  }; }
}
