<template>
  <div v-if="user.authenticated">
    <h1>{{ book.Title }}</h1>

    <div class="ui info message" v-if="loading">
      <icon name="refresh" spin></icon>&nbsp;&nbsp;
      Loading...
    </div>

    <div class="ui negative message" v-if="error">
      <div class="header">
        An error occured.
      </div>
      {{ error.message }}
      <p v-if="error.response.data">
        {{ error.response.data.Message }}
      </p>
    </div>

    <div v-if="!loading && !error">

      <router-link :to="{ name: 'book-edit', params: { id: bookID} }" class="ui teal labeled icon button" style="float: right;">
        <i class="edit icon"></i>
        Edit
      </router-link>

      <div class="ui list">
        <div class="item">
          <div class="header">
            ISBN
          </div>
          {{ book.Isbn }}
        </div>
        <div class="item">
          <div class="header">
            Year
          </div>
          {{ book.Year }}
        </div>
        <div class="item">
          <div class="header">
            Price
          </div>
          {{ book.Price }}
        </div>
        <div class="item">
          <div class="header">
            Status
          </div>
          {{ book.Status }}
        </div>
        <div class="item">
          <div class="header">
            Publisher
          </div>
          <router-link :to="{ name: 'publisher-show', params: { id: book.PublisherFull.ID} }">
            {{ book.PublisherFull.Name }}
          </router-link>
        </div>
        <div class="item">
          <div class="header">
            Authors
          </div>
          <template v-for="(author, index) in book.Authors">
            <router-link :to="{ name: 'author-show', params: { id: author.ID} }">
              {{ author.Lastname }} {{ author.Lastname }}
            </router-link>
              <template v-if="book.Authors.length > (index + 1)">, </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

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

  export default {
    name: 'Book',
    data () {
      return {
        user: auth.user,
        book: {},
        error: '',
        success: '',
        allStatus: [],
        bookID: this.$route.params.id
      }
    },
    created () {
      this.loadStatus()
      this.loadBook()
    },
    watch: {
      // call again the method if the route changes
      '$route': 'loadBook'
    },
    methods: {
      loadBook () {
        this.loading = true
        this.book = {}
        HTTP.get(`books/` + this.bookID)
          .then(response => {
            this.book = response.data

            // Get all authors and concat them into one singe string
            let authors = this.book.Authors
            for (const au in authors) {
              this.book.Author += authors[au].Forename + ' ' + authors[au].Lastname
              if (authors.length > au + 1) {
                this.book.Author += ', '
              }
            }

            // Make Status a name, not an id
            this.book.Status = this.getStatusByID(this.book.Status)
            this.loading = false
          })
          .catch(e => {
            this.loading = false
            this.error = e
          })
      },
      loadStatus: function () {
        HTTP.get('status')
          .then(response => {
            this.allStatus = response.data
          })
          .catch(e => {
            this.error = e
          })
      },
      getStatusByID: function (id) {
        // TODO: is there a better way to do this?
        for (const i in this.allStatus) {
          if (this.allStatus[i].ID === id) {
            return this.allStatus[i].Name
          }
        }
        return ''
      }
    }
  }
</script>
