class HPEvents {
  static #name = "hpEvents";
  static #id = 0;
  static defaults = {
    feedUrl: "//telegram.vcu.edu/feeds/homepage.ashx",
    eventCount: 0,
    viewMoreUrl:
      "https://telegram.vcu.edu",
  };

  constructor(element, options) {
    this.name = this.constructor.#name;
    this.id = this.constructor.#id++;
    this.element = element;
    this.options = { ...this.constructor.defaults, ...options };

    this.logger = new Logger();

    this.init();
  } //constructor

  init() {
    let _this = this;
    const opts = this.options;
    let container = this.element;

    _this.log("Initializing ...");

    _this.elements = {};

    container.innerHTML = `
            <h2 class="hp-events__section-header"><a href="https://telegram.vcu.edu/" title="View the VCU TelegRAM website">Events</a></h2>
            <div class="hp-events__result">
                <div class="loading__wrapper">
                    <div class="lds-ring" aria-hidden="true"><div></div><div></div><div></div><div></div></div>
                    <span>Loading event data ...</span>
                </div>
            </div>
            <p class="hp-events__view-more">
                <a href="${opts.viewMoreUrl}">View more events</a>
            </p>
        `;

    _this.elements.result = container.querySelector(".hp-events__result");

    _this.loadData((data) => {
      _this.renderEvents(data);
    });

    _this.log("Initialization complete");
  } //init

  loadData(loadedCallback) {
    let _this = this;
    const opts = this.options;

    fetch(opts.feedUrl, {
      mode: "cors",
    })
      .then((resp) => {
        if (!resp.ok) {
          _this.log("fetch response", resp);
          throw new Error("fetch failed");
        }

        return resp.text();
      })
      .then((text) => {
        return new DOMParser().parseFromString(text, "text/xml");
      })
      .then((data) => {
        _this.log("fetch successful - data", data);

        const processedData = _this.processData(data);

        if (loadedCallback && typeof loadedCallback == "function") {
          loadedCallback.call(_this, processedData);
        }
      })
      .catch((error) => {
        _this.log("fetch error", error);
      });
  } //loadData

  processData(xml) {
    const opts = this.options;

    let data = [];

    if (xml) {
      const items = xml.querySelectorAll("item");

      if (items) {
        for (let i = 0; i < items.length && i < opts.eventCount; i++) {
          const item = items[i];

          data.push({
            title: item.querySelector("title").innerHTML,
            description: item.querySelector("description").innerHTML,
            link: item.querySelector("link").innerHTML,
            date: item.querySelector("date").innerHTML,
            month: item.querySelector("month").innerHTML,
            day: item.querySelector("day").innerHTML,
            time: item.querySelector("time").innerHTML,
          });
        }
      }
    }

    return data;
  } //processData

  renderEvents(data) {
    let _this = this;
    const opts = this.options;

    let result = this.elements.result;

    _this.log("rendering events", data);

    result.innerHTML = "";

    if (data) {
      data.forEach((item) => {
        let elem = document.createElement("a");
        elem.classList.add("hp-event__item");

        elem.href = item.link;

        elem.innerHTML = `
                    <div class="hp-event__item-date-wrapper">
                        <div class="hp-event__item-date">
                            <span class="hp-event__item-month">${item.month}</span>
                            <span class="hp-event__item-day">${item.day}</span>
                        </div>
                    </div>
                    <div class="hp-event__item-content">
                        <h3 class="hp-event__item-header">${item.title}</h3>
                        <p class="hp-event__item-time">${item.time}</p>
                    </div>
                `;

        result.append(elem);
      });
    }
  } //renderEvents

  log(msg, obj) {
    msg = `[${this.constructor.#name}] ${msg}`;

    if (obj) {
      this.logger.log(msg, obj);
    } else {
      this.logger.log(msg);
    }
  } //log
} //class

class HPEventItem {
  constructor(title, description, link, author, email, date, month, day, time) {
    this.title = title;
  } //constructor
} //class