document.addEventListener('DOMContentLoaded', (event) => {
  const { createApp, ref } = Vue
  const regex = /\s*(?<sparklee>@\w+)\s+(?<reason>.+)/

  const app = createApp({
    created: function() {
      this.reload();
      this.intervalId = setInterval(() => this.reload(), 30000);
    },
    destroyed: function() {
      if (this.intervalId)
        clearInterval(this.intervalId);
      this.intervalId = null;
    },
    computed: {
      heading: function() {
        return this.sparkles.length == 0 ? "Nothing to see here" : "Recent";
      },
      recentSparkles: function() {
        return this.sparkles;
      },
      isDisabled: function() {
        return this.isSending || !this.isValid();
      }
    },
    data() {
      return {
        intervalId: null,
        errorMessage: "",
        isSending: false,
        sparkle: "",
        sparkles: [],
      }
    },
    methods: {
      reload: function() {
        fetch("/sparkles")
          .then((response) => response.json())
          .then((json) => this.sparkles = json)
          .catch((json) => console.dir(json));
      },
      isValid: function() {
        return this.sparkle.length > 0;
      },
      submitSparkle: function() {
        this.isSending = true;

        let matches = regex.exec(this.sparkle)
        let sparklee = matches.groups.sparklee
        let reason = matches.groups.reason

        fetch("/sparkles", {
          method: "POST",
          mode: "cors",
          cache: "no-cache",
          headers: { "Content-Type": "application/json" },
          redirect: "follow",
          body: JSON.stringify({ sparklee: sparklee, reason: reason })
        }).then((response) => {
          response.json().then((json) => {
            this.isSending = false;
            if (response.ok) {
              this.sparkles.push(json);
              this.sparkle = "";
            } else {
              this.errorMessage = json["error"];
            }
          })
        }).catch((error) => console.error(error));
      },
    }
  })

  app.config.compilerOptions.delimiters = ["${", "}"];
  app.mount('#app')
  htmx.logAll();
})