import { Component, Host, h, State } from '@stencil/core';
import { StudentService } from "../../services/student.service";
import userStore from "../../stores/user.store";
export class SparkleUserProfile {
  constructor() {
    this.profileFormControls = {
      ProfileImage: {
        isValid: true,
        value: '',
        validate: (_) => {
          return true;
        },
      },
      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;
          }
        },
      },
      ProfileText: {
        isValid: true,
        value: '',
        validate: (value) => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        }
      }
    };
    this.profileFormSubmitted = false;
  }
  componentWillLoad() {
    if (userStore.state.user) {
      const user = userStore.state.user;
      this.changeFormValue("FirstName", user.FirstName);
      this.changeFormValue("LastName", user.LastName);
      this.changeFormValue("ProfileText", user.ProfileText);
      this.changeFormValue("ProfileImage", user.ProfileImage);
    }
  }
  changeFormValue(controlName, value) {
    this.profileFormControls = Object.assign(Object.assign({}, this.profileFormControls), { [controlName]: Object.assign(Object.assign({}, this.profileFormControls[controlName]), { value: value, isValid: this.profileFormControls[controlName].validate(value) }) });
  }
  async handleProfileFormSubmit(e) {
    e.preventDefault();
    this.profileFormSubmitted = true;
    let isFormValid = true;
    //Run all validation functions
    for (let controlName in this.profileFormControls) {
      let control = this.profileFormControls[controlName];
      control.validate(control.value);
      if (!control.isValid) {
        isFormValid = false;
      }
    }
    console.log(this.profileFormControls);
    console.log("Form valid: ", isFormValid);
    if (isFormValid) {
      console.log('submit');
      let result = await StudentService.getInstance().updateProfile({
        FirstName: this.profileFormControls.FirstName.value,
        LastName: this.profileFormControls.LastName.value,
        ProfileImage: this.profileFormControls.ProfileImage.value,
        ProfileText: this.profileFormControls.ProfileText.value
      });
      console.log(result);
    }
  }
  render() {
    return (h(Host, null,
      h("form", { onSubmit: e => this.handleProfileFormSubmit(e), novalidate: true },
        h("ion-list", { "no-lines": true },
          h("ion-list-header", null, "Profile"),
          h("ion-item", null,
            h("ion-label", { position: "stacked", color: "primary" }, "First Name"),
            h("ion-input", { name: "firstName", type: "text", value: this.profileFormControls.FirstName.value, onInput: (ev) => this.changeFormValue("FirstName", ev.target.value) })),
          h("ion-text", { color: "danger" },
            h("p", { hidden: this.profileFormControls.FirstName.isValid || this.profileFormSubmitted === 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.profileFormControls.LastName.value, onInput: (ev) => this.changeFormValue("LastName", ev.target.value) })),
          h("ion-text", { color: "danger" },
            h("p", { hidden: this.profileFormControls.LastName.isValid || this.profileFormSubmitted === false, class: "ion-padding-start" }, "Last Name is required")),
          h("ion-item", null,
            h("ion-label", { position: "stacked", color: "primary" }, "Profile Bio"),
            h("ion-input", { name: "lastName", type: "text", value: this.profileFormControls.ProfileText.value, onInput: (ev) => this.changeFormValue("ProfileText", ev.target.value) })),
          h("ion-text", { color: "danger" },
            h("p", { hidden: this.profileFormControls.ProfileText.isValid || this.profileFormSubmitted === false, class: "ion-padding-start" }, "Profile Bio is required"))),
        h("div", { class: "ion-padding" },
          h("ion-button", { type: "submit", expand: "block" }, "Update")))));
  }
  static get is() { return "sparkle-user-profile"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-user-profile.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-user-profile.css"]
  }; }
  static get states() { return {
    "profileFormControls": {},
    "profileFormSubmitted": {}
  }; }
}
