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

    <div class="ui positive message" v-if="success">
      <div class="header">
        Success
      </div>
      {{ success }}
    </div>

    <form class="ui form" v-bind:class="{ loading: loading }" v-if="!success">
      <div class="field">
        <label>Title</label>
        <input name="title" placeholder="Title" type="text" v-model="book.Title">
      </div>
      <div class="three fields">
        <div class="field">
          <label>ISBN</label>
          <input name="isbn" placeholder="ISBN" type="text" v-model="book.Isbn">
        </div>
        <div class="field">
          <label>Price</label>
          <div class="ui right labeled input ">
            <input name="price" placeholder="Price" type="number" step="0.01" min="0" v-model.number="book.Price">
            <label class="ui label">€</label>
          </div>
        </div>
        <div class="field">
          <label>Year</label>
          <input name="year" placeholder="Year" type="number" min="1800" v-model.number="book.Year">
        </div>
        <div class="field">
          <label>Quantity</label>
          <input placeholder="Quantity" type="number" min="0" v-model.number="book.Quantity">
        </div>
      </div>

      <div class="field" v-if="!addPublisherForm">
        <label>Publisher</label>
        <a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="plus icon"></i></a>
        <multiselect
          v-model="book.PublisherFull"
          track-by="ID"
          label="Name"
          placeholder="Select one"
          :options="publishers"
          :searchable="true"
          :allow-empty="false"
          class="add-btn-input">
        </multiselect>
      </div>
      <div class="field" v-if="addPublisherForm">
        <label>Add new Publisher</label>
        <a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="list icon"></i></a>
        <input name="name" placeholder="Publisher Name" type="text" v-model="book.PublisherFull.Name" class="add-publisher">
      </div>

      <div class="field">
        <label>Authors</label>
        <multiselect
          v-model="book.Authors"
          track-by="ID"
          label="Name"
          placeholder="Select one or more"
          :options="authors"
          :searchable="true"
          :multiple="true"
          :allow-empty="false">
        </multiselect>
      </div>

      <template v-for="(inputModel, index) in addAuthorForm">
        <div class="field" v-if="addAuthorForm">
          <label>Add new Author</label>
          <a class="ui red icon button add-publisher-btn" @click="removeAuthor(index)"><i class="cancel icon"></i></a>
          <input name="name" placeholder="Author Name" v-model="newAuthors[inputModel.modelName]" type="text" class="add-publisher">
        </div>
      </template>

      <div class="field">
        <a class="ui green icon button" @click="addAddAuthor()"><i class="plus icon"></i> Add new Author</a>
      </div>

      <div class="inline fields">
        <label>Status</label>
        <div class="field" v-for="status in allStatus">
          <div class="ui radio checkbox">
            <input name="status" :id="status.ID" :value="status.ID" class="hidden" type="radio" v-model="book.Status"/>
            <label :for="status.ID">{{ status.Name }}</label>
          </div>
        </div>
      </div>

      <a class="ui button" type="submit" @click="insertNewBook()">Submit</a>
    </form>
  </div>
</template>

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

  export default {
    name: 'BooksAddEdit',
    data () {
      return {
        error: '',
        success: '',
        loading: false,
        bookID: this.$route.params.id,
        edit: false,
        book: {
          Title: '',
          Isbn: '',
          Year: (new Date()).getFullYear(),
          Price: null,
          Status: 0,
          Quantity: 0,
          PublisherFull: {
            ID: 0,
            Name: ''
          },
          Authors: []
        },
        publishers: [],
        authors: [],
        addPublisherForm: false,
        addAuthorForm: [],
        newAuthors: {},
        newestAuthor: 0,
        allStatus: []
      }
    },
    created () {
      this.loading = true
      this.loadPublishers()
      this.loadAuthors()
      this.loadStatus()

      // Look if we're in edit mode and get the book infos if nessesary
      if (this.bookID) {
        HTTP.get('books/' + this.bookID)
          .then(response => {
            this.book = response.data
            this.edit = true

            // Loop through all authors and reverse them
            let as = this.book.Authors

            for (const i in as) {
              this.book.Authors[i] = {
                ID: as[i].ID,
                Name: as[i].Forename + ' ' + as[i].Lastname
              }
            }
          })
          .catch(e => {
            this.error = e
          })
      }
      this.loading = false
    },
    methods: {
      loadPublishers: function () {
        HTTP.get('publishers')
          .then(response => {
            this.publishers = response.data
          })
          .catch(e => {
            this.error = e
          })
      },
      loadAuthors: function () {
        HTTP.get('authors')
          .then(response => {
            let as = response.data

            for (const i in as) {
              this.authors[i] = {
                ID: as[i].ID,
                Name: as[i].Forename + ' ' + as[i].Lastname
              }
            }
          })
          .catch(e => {
            this.error = e
          })
      },
      loadStatus: function () {
        HTTP.get('status')
          .then(response => {
            this.allStatus = response.data
          })
          .catch(e => {
            this.error = e
          })
      },
      toggleAddPublisher: function () {
        this.addPublisherForm = !this.addPublisherForm
        this.book.PublisherFull = {ID: 0, Name: ''}
      },
      addAddAuthor: function () {
        this.addAuthorForm.push({
          modelName: 'newAuthor' + this.newestAuthor
        })
        this.newestAuthor++
      },
      removeAuthor: function (i) {
        delete this.newAuthors[this.addAuthorForm[i].modelName]
        this.addAuthorForm.splice(i, 1)
      },
      insertNewBook: function () {
        this.loading = true

        // Add all newly created authors to it
        let as = this.newAuthors

        for (const i in as) {
          this.book.Authors.push({
            ID: 0,
            Name: as[i]
          })
        }

        // Beautify all Authors aka split the names in forename and lastname
        for (const i in this.book.Authors) {
          let author = this.book.Authors[i].Name
          let firstname = ''
          let lastname = ''

          // Check if the name contains a space, if so split it up
          if ((new RegExp(' ')).test(author)) {
            let split = author.indexOf(' ')
            let splits = [author.slice(0, split), author.slice(split + 1)]
            firstname = splits[0]
            lastname = splits[1]
          } else {
            lastname = author
          }

          // Put it all together
          this.book.Authors[i] = {
            ID: this.book.Authors[i].ID,
            Forename: firstname,
            Lastname: lastname
          }
        }

        // Finally Send it
        // If we want to newly insert it, make a different request
        if (this.edit) {
          HTTP.post('books/' + this.book.ID, {book: this.book})
            .then(response => {
              this.loading = false
              this.success = 'The book was successfully updated!'
            })
            .catch(e => {
              this.loading = false
              this.error = e
            })
        } else { // insert a new book
          HTTP.put('books', {book: this.book})
            .then(response => {
              this.loading = false
              this.success = 'The book was successfully inserted!'
            })
            .catch(e => {
              this.loading = false
              this.error = e
            })
        }
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
  .multiselect__input {
    border: none !important;
    margin-top: -0.5rem !important;
    margin-left: -0.5rem !important;
  }

  .add-publisher-btn{
    float: right;
    margin-top: 2px;
  }

  .add-btn-input, .field input.add-publisher {
    width: 97% !important;
  }
</style>
