import { Component, Listen, Prop, State, Element, h } from '@stencil/core';
//import { l10n } from '../../../../l10n';
import { menuController } from '@ionic/core';
export class SparkleFacilitatorHeader {
  constructor() {
    this.courseName = '';
    this.hidden = false;
    this.frameRequested = false;
    this.prevScroll = 0;
  }
  handleScroll() {
    if (!this.frameRequested) {
      requestAnimationFrame(() => {
        const { scrollY } = window;
        this.hidden = scrollY > 60 && scrollY > this.prevScroll;
        this.prevScroll = scrollY;
        this.frameRequested = false;
      });
      this.frameRequested = true;
    }
  }
  componentWillLoad() {
  }
  hostData() {
    return {
      class: { hidden: this.hidden },
    };
  }
  openEnd() {
    menuController.enable(true, 'students');
    menuController.open('students');
  }
  async openOnlineStudentsSidebar() {
    var sidebar = document.getElementById("#onlineStudents");
  }
  render() {
    return (h("header", null,
      h("a", { href: "/home" },
        h("div", { class: "HeaderLogo" }, this.courseName)),
      h("header-mobile-collapse", null,
        h("div", { class: "SectionNav-tabs" }),
        h("nav", { class: "UtilNav" },
          h("sparkle-button", { href: "/login", round: true }, "Login"),
          h("sparkle-button", { href: "/signup", primary: true, round: true }, "Get Started"),
          h("slot", { name: "logo" })))));
  }
  static get is() { return "sparkle-facilitator-header"; }
  static get originalStyleUrls() { return {
    "$": ["facilitator-header.css"]
  }; }
  static get styleUrls() { return {
    "$": ["facilitator-header.css"]
  }; }
  static get properties() { return {
    "courseName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "course-name",
      "reflect": false,
      "defaultValue": "''"
    },
    "toggleStudentClickFn": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "(e: Event) => void",
        "resolved": "(e: Event) => void",
        "references": {
          "Event": {
            "location": "global"
          }
        }
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "hidden": {}
  }; }
  static get elementRef() { return "el"; }
  static get listeners() { return [{
      "name": "scroll",
      "method": "handleScroll",
      "target": "window",
      "capture": false,
      "passive": true
    }]; }
}
