import { Component, h, Prop, State } from '@stencil/core';
import facilitatorStore from '../../../../stores/facilitator.store';
import { SignalRService } from '../../../../services/signalR.service';
export class SparkleOnlineStudents {
  constructor() {
    this.onlineStudents = [];
    this.handleStudentChange = (user, change) => {
      console.log("handle student change");
      if (change == "list") {
        facilitatorStore.state.onlineStudents = [...user];
      }
    };
  }
  componentDidLoad() {
    console.log("componentDidLoad");
    SignalRService.getInstance().connection.on("StudentAction", this.handleStudentChange);
    this.refreshList();
  }
  navigateStudentTo(student) {
    SignalRService.getInstance().callSignalR("NavigateStudentTo", { userId: student.userId, url: this.path.replace(".json", "") });
  }
  refreshList() {
    SignalRService.getInstance().callSignalR("GetOnlineStudents", { CourseClassId: 1 });
  }
  render() {
    console.log("faciliatator state", facilitatorStore.state.onlineStudents);
    return (h("div", null,
      h("div", { class: "p-2 pb-4 d-md-flex justify-content-md-end" },
        h("button", { class: "btn btn-primary pull-right", type: "button", onClick: () => this.refreshList() }, "Refresh")),
      h("div", null,
        facilitatorStore.state.onlineStudents.length > 0 &&
          h("ol", { class: "list-group list-group-numbered" }, facilitatorStore.state.onlineStudents.map((item) => h("li", { class: "list-group-item d-flex justify-content-between align-items-start", key: item.userId },
            h("div", { class: "ms-2 me-auto" },
              h("div", { class: "fw-bold" }, item.name),
              item.currentUrl),
            h("button", { type: "button", class: "btn btn-primary btn-sm", onClick: () => this.navigateStudentTo(item) }, "Navigate")))),
        facilitatorStore.state.onlineStudents.length == 0 &&
          h("div", { class: "text-center" },
            h("h3", null, "No Students")))));
  }
  static get is() { return "sparkle-online-students"; }
  static get originalStyleUrls() { return {
    "$": ["online-students.css"]
  }; }
  static get styleUrls() { return {
    "$": ["online-students.css"]
  }; }
  static get properties() { return {
    "path": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "path",
      "reflect": false
    }
  }; }
  static get states() { return {
    "onlineStudents": {}
  }; }
}
