root = new Vue({
  el: "#container",
  data: {
    pull_time: null,
    feed_urls: [],
    feeds: {
      feeds: [],
    },
    collapsed: false,

    current_feed: {
      metadata: {
        description: null,
        fetch_url: null,
        link: null,
        title: null,
      },
      base_path: null,
      items: [],
    },

    current_item: {
      title: null,
      date: null,
      author: null,
      id: null,
      link: null,
      content: null,
      path: null,
    },

    feed_item_counts: {},

    likes: [],
    show_likes: true,
  },

  computed: {
    feed_visible() {
      return (
        !this.show_likes &&
        this.current_feed.metadata.title !== null &&
        this.current_feed.items.length > 0
      );
    },

    item_content() {
      let result = null;
      if (this.current_item.content !== null) {
        result = DOMPurify.sanitize(this.current_item.content, {
          FORBID_TAG: ["style"],
          FORBID_ATTR: ["style"],
        });
      }
      return result;
    },
  },

  methods: {
    list_likes() {
      this.likes = [];
      oboe("events.json").node("*", (ev) => {
        let { event } = ev;
        if (event === "like-item") {
          this.likes.unshift(ev);
        }
      });
      this.show_likes = !this.show_likes;
    },

    toggleCollapse() {
      this.collapsed = !this.collapsed;
    },

    sanitize(html) {
      return DOMPurify.sanitize(html, {
        FORBID_TAG: ["style"],
        FORBID_ATTR: ["style"],
      });
    },

    get_remote_feed: function (path, shouldPushState = true) {
      var promise = new Promise((resolve, reject) => {
        window
          .fetch(path + "index.json")
          .then((resp) => resp.json())
          .then((data) => {
            var result = Object.assign({}, data);
            result.fetch_url = data["fetch-url"];
            result.base_path = path;
            if (shouldPushState) {
              window.history.pushState(
                {
                  current_feed: result,
                },
                "",
                window.location.pathname
              );
            }
            resolve(result);
            return promise;
          }, reject.bind(promise));
      });
      return promise;
    },

    get_feed: function (path) {
      this.get_remote_feed(path)
        .then((result) => Vue.set(this, "current_feed", result))
        .then(() => (this.show_likes = false));
    },

    like(item, feed) {
      fetch("https://srv2.elangley.org/hub/feed_archive", {
        method: "POST",
        body: JSON.stringify({
          event: "like-item",
          item: item.link,
          title: item.title,
          author: item.author,
          "feed-title": feed.metadata.title,
          "feed-link": feed.metadata.link,
        }),
      });
    },

    get_item(path) {
      window
        .fetch(this.current_feed.base_path + path)
        .then((resp) => resp.json())
        .then((data) => {
          fetch("https://srv2.elangley.org/hub/feed_archive", {
            method: "POST",
            body: JSON.stringify({
              event: "read-item",
              item: data.link,
              title: data.title,
              author: data.author,
              "feed-title": this.current_feed.metadata.title,
              "feed-link": this.current_feed.metadata.link,
            }),
          });
          window.history.pushState(
            {
              current_feed: root.current_feed,
              current_item: data,
            },
            "",
            window.location.pathname
          );
          Object.assign(this.current_item, data);
          this.current_item.path = path;
        });
    },

    has_items(feed) {
      var count = this.feed_item_counts[feed.path];
      return count === undefined || count > 0;
    },
  },

  ready() {
    oboe("events.json").node("*", (ev) => {
      let { event } = ev;
      if (event === "like-item") {
        this.likes.unshift(ev);
      }
    });

    window
      .fetch(baseUrl + "/index.json")
      .then((resp) => resp.json())
      .then(function (data) {
        root.pull_time = data["pull-time"];
        root.feed_urls = data["feed-urls"];
        root.feeds = data.feeds;
        return data;
      })
      .then((data) => {
        root.feeds.forEach((feed) => {
          // console.log(feed);
          this.get_remote_feed(feed.path, false).then((feed_index) =>
            Vue.set(this.feed_item_counts, feed.path, feed_index.items.length)
          );
        });
      });
  },
});

window.onpopstate = function (ev) {
  // console.log(ev);
  var current_feed = ev.state.current_feed,
    current_item = ev.state.current_item;

  Object.assign(root.current_feed, current_feed);

  if (current_item !== undefined) {
    Object.assign(root.current_item, current_item);
  }
};

document.addEventListener("DOMContentLoaded", function (ev) {
  if (window.history.state !== null) {
    Object.assign(root.current_feed, window.history.state.current_feed);
    if (window.history.state.current_item !== undefined) {
      Object.assign(root.current_item, window.history.state.current_item);
    }
  }
});