const app = new Vue({
  el: '#app',
  data: {
    info: null,
    summaries: [],
    selectedSummary: null,
    filterGreen: true,
    filterDomain: null,
    filterOrg: null,
    //filterDate: (new Date()).toISOString().substring(0, 7),
    filterDate: null,
    reverse: true,
  },
  created: async function () {
    let that = this;

    try {
      this.info = await this.getInfo();
      this.summaries = this.info.summaries;
    } catch (error) {}
  },
  methods: {
    filtered: function () {
      let that = this;
      let filtered = this.summaries.filter(function (summary) {
        return (!that.filterGreen || that.getColor(summary) !== "lime")
          && (!that.filterDomain || summary.domain === that.filterDomain)
          && (!that.filterOrg || summary.org === that.filterOrg)
          && (!that.filterDate || that.inDates(summary));
      });
      if (this.reverse) {
        return filtered.reverse();
      } else {
        return filtered;
      }
    },
    toggle: async function(summary) {
      if (this.selectedSummary && this.selectedSummary.serial === summary.serial) {
        this.selectedSummary = null;
      } else {
        if (!summary.details) {
          summary.details = await this.getDetails(summary.serial);
        }
        this.selectedSummary = summary;
      }
    },
    inDates: function(summary) {
      if (!this.filterDate) { return true; }

      let mindate = (new Date(summary.mindate)).toISOString().substring(0, 7);
      let maxdate = (new Date(summary.maxdate)).toISOString().substring(0, 7);

      return mindate === this.filterDate || maxdate === this.filterDate;
    },
    printDate: function (date) {
      return (new Date(date)).toISOString();
    },
    getColor: function (element) {
      if (element.dkimresult === "fail" && element.spfresult === "fail") {
        return "red";
      } else if (element.dkimresult === "fail" || element.spfresult === "fail") {
        return "orange";
      } else if (element.dkimresult === "pass" && element.spfresult === "pass") {
        return "lime";
      } else {
        return "yellow";
      }
    },
    getInfo: function (event) {
      return fetch('api.php').then(function (response) {
        if (response.status != 200) { return; }
        return response.text().then(function (body) {
          return JSON.parse(body);
        });
      });
    },
    getDetails: function (serial) {
      return fetch(`api.php?serial=${serial}`).then(function (response) {
        if (response.status != 200) { return; }
        return response.text().then(function (body) {
          return JSON.parse(body);
        });
      });
    }
  }
});