import { Component, Host, State, h } from '@stencil/core';
import { StudentService } from "../../services/student.service";
import userStore from "../../stores/user.store";
export class SparkleUserEnrollment {
  constructor() {
    this.enrollmentFormControls = {
      ShortCode: {
        isValid: false,
        value: '',
        validate: (value) => {
          if (value) {
            return true;
          }
          else {
            return false;
          }
        },
      },
    };
    this.enrollmentFormSubmitted = false;
  }
  changeEnrollmentFormValue(controlName, value) {
    this.enrollmentFormControls = Object.assign(Object.assign({}, this.enrollmentFormControls), { [controlName]: Object.assign(Object.assign({}, this.enrollmentFormControls[controlName]), { value: value, isValid: this.enrollmentFormControls[controlName].validate(value) }) });
  }
  async handleEnrollmentFormSubmit(e) {
    e.preventDefault();
    this.enrollmentFormSubmitted = true;
    let isFormValid = true;
    //Run all validation functions
    for (let controlName in this.enrollmentFormControls) {
      let control = this.enrollmentFormControls[controlName];
      control.validate(control.value);
      if (!control.isValid) {
        isFormValid = false;
      }
    }
    if (isFormValid) {
      let result = await StudentService.getInstance().enrollClass({
        ShortCode: this.enrollmentFormControls.ShortCode.value,
      });
      console.log(result);
    }
  }
  async leaveClass(enrollmentId) {
    let result = await StudentService.getInstance().leaveClass({
      Id: enrollmentId,
    });
    console.log(result);
  }
  renderEnrollmentList() {
    if (userStore.state.enrollmentList.length > 0) {
      return (userStore.state.enrollmentList.map((item) => h("ion-item", null,
        h("ion-label", null, item.Name),
        h("ion-button", { onClick: () => this.leaveClass(item.Id) },
          h("ion-icon", { name: "trash" })))));
    }
    else {
      return (h("ion-item", { lines: "none" },
        h("ion-text", { class: "ion-text-center" }, "No data found")));
    }
  }
  render() {
    return (h(Host, null,
      h("form", { onSubmit: e => this.handleEnrollmentFormSubmit(e), novalidate: true },
        h("ion-list", { "no-lines": true },
          h("ion-list-header", null, "Enrollment"),
          h("ion-grid", null,
            h("ion-row", { class: "ion-align-items-center" },
              h("ion-col", { size: "9" },
                h("ion-item", null,
                  h("ion-label", { position: "stacked", color: "primary" }, "Short Code"),
                  h("ion-input", { name: "ShortCode", type: "text", value: this.enrollmentFormControls.ShortCode.value, onInput: (ev) => this.changeEnrollmentFormValue("ShortCode", ev.target.value) })),
                h("ion-text", { color: "danger" },
                  h("p", { hidden: this.enrollmentFormControls.ShortCode.isValid || this.enrollmentFormSubmitted === false, class: "ion-padding-start" }, "Short Code is required"))),
              h("ion-col", { size: "3" },
                h("div", null,
                  h("ion-button", { slot: "end", type: "submit", expand: "block" }, "Enroll"))))))),
      h("ion-list", null,
        h("ion-list-header", null, "Enroll List"),
        this.renderEnrollmentList())));
  }
  static get is() { return "sparkle-user-enrollment"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-user-enrollment.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-user-enrollment.css"]
  }; }
  static get states() { return {
    "enrollmentFormControls": {},
    "enrollmentFormSubmitted": {}
  }; }
}
