var app = new Vue({
  el: "#app",
  data: {
    user: null,
    repositories: []
  },
  mounted: function() {
    // Here we initialize Pizzly.
    this.$pizzly = new Pizzly({
      host: "pushtogsheet.herokuapp.com",
      publishableKey: "pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj"
    });

    // If you don't have an account on Bearer.sh
    // create one for free at https://www.bearer.sh/signup
    // then grab your Bearer Publishable key
    // (pk_production...) in the settings page.
  },
  methods: {
    connect: function() {
      // Here, we create a new method
      // that "connect" a user to GitHub
      this.$pizzly
        .integration('github')
        .connect()
        .then(this.connectSuccess)
        .catch(this.connectError);
    },
    connectSuccess: function(data) {
      // On success, we update the user object
      console.log(data)
      this.user = data.authId;
      this.fetchStarringRepositories()
    },
    connectError: function (err) {
      console.error(err)
      alert("Something went wrong. Look at the logs.")
    },
    fetchStarringRepositories: function() {
      this.$pizzly
        .integration("github")
        .auth(this.user)
        .get("/user/starred")
        .then(response => response.json())
        .then((data) => { this.repositories = data })
        .catch(this.fetchError)
    },
    fetchError: function (err) {
      console.error(err)
      alert("Something went wrong. Look at the logs.")
    }
  }
});