import { Component, State, Prop, getAssetPath, h } from '@stencil/core';
import { AccountService } from "../../services/account.service";
import { AuthStore } from '../../stores';
export class SparkleSignup {
  constructor() {
    this.formControls = {
      firstName: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
      lastName: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
      userName: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
      email: {
        isValid: false,
        value: '',
        validate: value => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
      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;
  }
  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().register({
        Email: this.formControls.email.value,
        UserName: this.formControls.userName.value,
        FirstName: this.formControls.firstName.value,
        LastName: this.formControls.lastName.value,
        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("div", null,
        h("div", { class: "signup-logo" },
          h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
        h("sparkle-validation-error", { errors: this.validationErrors }),
        h("form", { onSubmit: e => this.handleSubmit(e), novalidate: true },
          h("ion-list", { "no-lines": true },
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "First Name"),
              h("ion-input", { name: "firstName", type: "text", value: this.formControls.firstName.value, onInput: (ev) => this.changeFormValue("firstName", ev.target.value) })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.formControls.firstName.isValid || this.submitted === false, class: "ion-padding-start" }, "First Name is required")),
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Last Name"),
              h("ion-input", { name: "lastName", type: "text", value: this.formControls.lastName.value, onInput: (ev) => this.changeFormValue("lastName", ev.target.value) })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.formControls.lastName.isValid || this.submitted === false, class: "ion-padding-start" }, "Last Name is required")),
            h("ion-item", null,
              h("ion-label", { position: "stacked", color: "primary" }, "Username"),
              h("ion-input", { name: "userName", type: "text", value: this.formControls.userName.value, onInput: (ev) => this.changeFormValue("userName", ev.target.value) })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.formControls.userName.isValid || this.submitted === false, class: "ion-padding-start" }, "Username is required")),
            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) })),
            h("ion-text", { color: "danger" },
              h("p", { hidden: this.formControls.email.isValid || this.submitted === false, class: "ion-padding-start" }, "Email is required")),
            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("div", { class: "ion-padding" },
            h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
              AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
              "Register")),
          h("ion-item", { lines: "none" },
            "Already have an account? \u00A0",
            h("stencil-route-link", { url: "/login", exact: true }, "Log In"))))
    ];
  }
  static get is() { return "sparkle-signup"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-signup.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-signup.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": {}
  }; }
}
