<template>
  <div>
    <div class="ui positive message" v-if="success">
      <div class="header" v-lang.general.success></div>
      {{ success }}
    </div>

    <form class="ui form" v-bind:class="{ loading: loading }" v-if="!success" @submit.prevent="insertOrUpdateAuthor">
      <div class="field">
        <label v-lang.authors.forename></label>
        <input name="forename" :placeholder="langAuthors.forename" type="text" v-model="author.forename" v-focus>
      </div>

      <div class="field">
        <label v-lang.authors.lastname></label>
        <input name="lastname" :placeholder="langAuthors.lastname" type="text" v-model="author.lastname" required>
      </div>

      <button class="ui blue button" type="submit" v-lang.general.submit></button>
    </form>
  </div>
</template>

<script>
  import {HTTP} from '../http-common'
  import router from '../router'

  export default {
    name: 'AuthorsAddEdit',
    data () {
      return {
        success: '',
        loading: false,
        authorid: this.$route.params.id,
        edit: false,
        author: {
          forename: '',
          lastname: ''
        }
      }
    },
    created () {
      this.loading = true

      // Look if we're in edit mode and get the author infos if nessesary
      if (this.authorid) {
        HTTP.get('authors/' + this.authorid)
          .then(response => {
            this.author = response.data
            this.edit = true
          })
          .catch(e => {
            this.errorNotification(e)
          })
      }

      // Set the title
      document.title = this.translate('authors').newAuthor + ' | ' + this.translate('nav').authors
      if (this.authorid) {
        document.title = this.translate('general').edit + ' | ' + this.translate('nav').authors
      }

      this.loading = false
    },
    computed: {
      langAuthors () {
        return this.translate('authors')
      },
      langGeneral () {
        return this.translate('general')
      }
    },
    methods: {
      errorNotification (e) {
        // Build the notification text from error response
        let err = e.message
        if (e.response.data.message) {
          err += '<br/>' + e.response.data.message
        }

        // Fire a notification
        this.$notify({
          type: 'error',
          title: this.langGeneral.error,
          text: err
        })
      },
      insertOrUpdateAuthor: function () {
        if (this.author.lastname === '') {
          // Fire a notification
          this.$notify({
            type: 'warn',
            text: this.translate('authors').errorNoTitle
          })
        } else {
          this.loading = true

          // Finally Send it
          // If we want to newly insert it, make a different request
          if (this.edit) {
            HTTP.post('authors/' + this.author.id, this.author, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
              .then(response => {
                this.loading = false

                // Fire a notification
                this.$notify({
                  type: 'success',
                  title: this.translate('general').success,
                  text: this.translate('authors').updatedSuccess
                })

                // Redirect to authors list
                router.push({ name: 'authors' })
              })
              .catch(e => {
                this.loading = false
                this.errorNotification(e)
              })
          } else { // insert a new author
            HTTP.put('authors', this.author, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
              .then(response => {
                this.loading = false

                // Fire a notification
                this.$notify({
                  type: 'success',
                  title: this.translate('general').success,
                  text: this.translate('authors').insertedSuccess
                })

                // Redirect to authors list
                router.push({ name: 'authors' })
              })
              .catch(e => {
                this.loading = false
                this.errorNotification(e)
              })
          }
        }
      }
    }
  }
</script>
