import { Host, h } from "@stencil/core";
import { formatDateForCanvas, getOneYearAgoToday } from "../../utils/utils";
export class HomeAnnouncementContainer {
  constructor() {
    this.generateAnnouncements = (announcement) => {
      return (h("lucan-home-announcement", { key: `announcement-${announcement.id}`, announcementTitle: announcement.title, avatar: announcement.author.avatar_image_url, read: announcement.read_state === "read", announcementDate: announcement.posted_at, announcerName: announcement.author.display_name, announcerBio: announcement.author.html_url, announcementUrl: announcement.html_url, message: announcement.message, announcementId: announcement.id, markAsReadUrl: `${this.baseUrl}/api/v1/courses/${this.courseNumber}/discussion_topics/${announcement.id}/read` }));
    };
    this.courseNumber = undefined;
    this.showAnnouncements = true;
    this.numberOfAnnouncementsToShow = 0;
    this.baseUrl = undefined;
    this.announcements = undefined;
  }
  /**
   * Get the needed data from the Canvas Environment.
   * Get the date range needed to make the request.
   * Fetch the announcements
   */
  connectedCallback() {
    const win = window;
    const canvasEnv = win.ENV;
    if (canvasEnv) {
      this.courseNumber = canvasEnv.COURSE.id;
      this.showAnnouncements = canvasEnv.SHOW_ANNOUNCEMENTS;
      this.numberOfAnnouncementsToShow = canvasEnv.ANNOUNCEMENT_LIMIT;
      this.baseUrl = canvasEnv.DEEP_LINKING_POST_MESSAGE_ORIGIN;
      const now = new Date();
      const startDate = formatDateForCanvas(getOneYearAgoToday(now));
      const endDate = formatDateForCanvas(now);
      this.fetchAnnouncements(`${this.baseUrl}/api/v1/announcements?context_codes[]=course_${this.courseNumber}&start_date=${startDate}&end_date=${endDate}`);
    }
  }
  /**
   * Right now the "not graphql" API doesn't require the cross site protection
   * @param {string} url
   * @returns {Promise<void>}
   */
  fetchAnnouncements(url) {
    return fetch(url, {
      headers: { accept: "application/json" }
    })
      .then(res => res.json())
      .then(body => {
      this.announcements = body;
    });
  }
  /**
   * It's concerning that some canvas announcemnts do not have posted or published at dates
   * @param {CanvasAnnouncement} a
   * @param {CanvasAnnouncement} b
   * @returns {number}
   */
  sortByPostedAtDate(a, b) {
    const dateA = new Date(a.posted_at);
    const dateB = new Date(b.posted_at);
    return dateB.getTime() - dateA.getTime();
  }
  render() {
    return (h(Host, null, h("div", { class: "home-announcement-header" }, !!this.announcements &&
      this.announcements.length > 0 &&
      !!this.showAnnouncements
      ? `Recent Announcements`
      : ``), h("div", { class: "home-announcement-container" }, !!this.announcements &&
      !!this.showAnnouncements &&
      this.announcements
        .sort(this.sortByPostedAtDate)
        .slice(0, this.numberOfAnnouncementsToShow)
        .map(this.generateAnnouncements))));
  }
  static get is() { return "lucan-home-announcement-container"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["home-announcement-container.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["home-announcement-container.css"]
    };
  }
  static get states() {
    return {
      "courseNumber": {},
      "showAnnouncements": {},
      "numberOfAnnouncementsToShow": {},
      "baseUrl": {},
      "announcements": {}
    };
  }
}
//# sourceMappingURL=home-announcement-container.js.map
