import Vue from 'vue'
import VueResource from 'vue-resource'

const csrfToken = document.querySelector('meta[name="csrf-token"]').content

Vue.use(VueResource)

Vue.component('Modal', {
  template: '#modal-template',
  props: ['show'],
  methods: {
    close: function () {
      this.$emit('close')
    }
  },
  mounted: function () {
    document.addEventListener('keydown', (e) => {
      if (this.show && e.keyCode === 27) {
        this.close()
      }
    })
  }
})

Vue.component('BanModal', {
  template: '#ban-modal-template',
  props: ['show', 'id'],
  data: function () {
    return {
      error: '',
      reason: '',
      expires_at: null
    }
  },
  methods: {
    close: function () {
      this.$emit('close')
      this.error = ''
      this.reason = ''
      this.expires_at = null
    },
    submit: function () {
      this.$http.post('/admin/api/ban', {
        user_id: this.id,
        reason: this.reason,
        expires_at: this.expires_at,
        csrf: csrfToken
      }).then(data => {
        this.close()
        this.$root.$emit('reload_bans')
      }).catch(err => {
        console.log(err)
        if (err.body && err.body.error) this.error = err.body.error
      })
    }
  }
})

Vue.component('UserList', {
  template: '#user-list-template',
  props: [],
  data: function () {
    return {
      pagination: {
        offset: 0,
        page: 1,
        pages: 1,
        perPage: 6,
        total: 0
      },
      users: [],
      banning: 0
    }
  },
  methods: {
    getUsers: function (page) {
      this.$http.get('/admin/api/users?page=' + page).then(data => {
        if (data.body && data.body.error) return
        this.pagination = data.body.page
        this.users = data.body.users

        console.log(this.pagination)
      })
    }
  },
  mounted: function () {
    this.getUsers(1)
  }
})

Vue.component('BanList', {
  template: '#ban-list-template',
  props: [],
  data: function () {
    return {
      pagination: {
        offset: 0,
        page: 1,
        pages: 1,
        perPage: 6,
        total: 0
      },
      error: '',
      bans: []
    }
  },
  methods: {
    getBans: function (page) {
      this.error = ''
      this.pagination.total = 0
      this.$http.get('/admin/api/bans?page=' + page).then(data => {
        if (data.body && data.body.error) {
          this.error = data.body.error
          return
        }

        this.pagination = data.body.page
        this.bans = data.body.bans
      })
    },
    pardon: function (id) {
      this.$http.post('/admin/api/ban/pardon/' + id).then(data => {
        this.getBans(1)
      })
    }
  },
  mounted: function () {
    this.getBans(1)

    this.$root.$on('reload_bans', () => {
      this.getBans(1)
    })
  }
})

const app = new Vue({
  el: '#app'
})