import { Component, State, h, getAssetPath } from '@stencil/core';
import { AccountService } from "../../services/account.service";
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) {
      console.log('submit');
      let result = await AccountService.getInstance().forgotPassword({
        Email: this.formControls.email.value
      });
      console.log(result);
    }
  }
  render() {
    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.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" }, "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 states() { return {
    "formControls": {},
    "submitted": {}
  }; }
}
