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

import UserList from './component/UserList.vue'
import BanList from './component/BanList.vue'

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
      })
    }
  }
})

const app = new Vue({
  el: '#app',
  components: {
    UserList,
    BanList
  }
})