<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="insertOrUpdatePublisher">
      <div class="field">
        <label v-lang.general.name></label>
        <input name="name" :placeholder="langGeneral.name" type="text" v-model="publisher.name" required v-focus>
      </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: 'PublishersAddEdit',
    data () {
      return {
        success: '',
        loading: false,
        publisherID: this.$route.params.id,
        edit: false,
        publisher: {
          name: ''
        }
      }
    },
    created () {
      this.loading = true

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

      // Set the title
      document.title = this.translate('publishers').newPublisher + ' | ' + this.translate('nav').publishers
      if (this.publisherID) {
        document.title = this.translate('general').edit + ' | ' + this.translate('nav').publishers
      }

      this.loading = false
    },
    computed: {
      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
        })
      },
      insertOrUpdatePublisher: function () {
        if (this.publisher.Lastname === '') {
          // Fire a notification
          this.$notify({
            type: 'warn',
            title: this.translate('general').error,
            text: this.translate('publishers').errorNoName
          })
        } else {
          this.loading = true

          // Finally Send it
          // If we want to newly insert it, make a different request
          if (this.edit) {
            HTTP.post('publishers/' + this.publisher.id, this.publisher, { 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('publishers').updatedSuccess
                })

                // Redirect to books list
                router.push({ name: 'publishers' })
              })
              .catch(e => {
                this.loading = false
                this.errorNotification(e)
              })
          } else { // insert a new publisher
            HTTP.put('publishers', this.publisher, { 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('publishers').insertedSuccess
                })

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