<template>
  <div>
    <b-modal
      ref="modalShowName"
      title="Name of the show"
      size="lg"
      @ok="saveName"
    >
      <b-form-input
        v-model="string"
        type="text"
        placeholder="Enter name of the show"
      />
    </b-modal>

    <b-modal
      ref="modalShowShortDescription"
      title="Short description"
      size="lg"
      @ok="saveShortDescription"
    >
      <b-form-textarea
        v-model="string"
        :rows="2"
        placeholder="Enter a short description"
      />
    </b-modal>

    <b-modal
      ref="modalShowDescription"
      title="Full description"
      size="lg"
      @ok="saveDescription"
    >
      <b-form-textarea
        v-model="string"
        :rows="2"
        placeholder="Enter the full description of this show"
      />
    </b-modal>

    <!-- TODO: use b-form outside the b-form-input, so that
               simple input validation works automagically -->
    <b-modal
      ref="modalShowEmail"
      title="E-Mail"
      size="lg"
      @ok="saveEmail"
    >
      <b-form-input
        v-model="string"
        type="email"
        placeholder="Put a contact address of your show here"
      />
    </b-modal>

    <!-- TODO: use b-form outside the b-form-input, so that
               simple input validation works automagically -->
    <b-modal
      ref="modalShowWebsite"
      title="Website"
      size="lg"
      @ok="saveWebsite"
    >
      <b-form-input
        v-model="string"
        type="url"
        placeholder="Put the website of your show here"
      />
    </b-modal>

    <!-- TODO: use b-form outside the b-form-input, so that
               simple input validation works automagically -->
    <b-modal
      ref="modalShowCBAid"
      title="CBA Series ID"
      size="lg"
      @ok="saveCBAid"
    >
      <b-form-input
        v-model="id"
        type="number"
        placeholder="Put the CBA Series ID of your show here"
      />
    </b-modal>

    <!-- TODO: use b-form outside the b-form-input, so that
               simple input validation works automagically -->
    <b-modal
      ref="modalShowPredecessor"
      title="Predecessor of this show"
      size="lg"
      @ok="savePredecessor"
    >
      <b-form-select
        v-model="id"
        :options="showPredecessorSelector"
      />
    </b-modal>

    <b-modal
      ref="modalShowType"
      title="Show type"
      size="lg"
      @ok="saveShowType"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <b-form-select
              v-model="id"
              :options="showTypeSelector"
            />
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalShowFundingCategory"
      title="Funding category of this show"
      size="lg"
      @ok="saveFundingCategory"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <b-form-select
              v-model="id"
              :options="showFundingCategorySelector"
            />
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalShowCategories"
      title="Categories of this show"
      size="lg"
      @ok="saveCategories"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <p>Choose one or more categoires for this show:</p>
            <b-form-select
              v-model="array"
              multiple
              :options="showCategorySelector"
              :select-size="5"
            />
            <br><br>
            <b-alert
              show
              dismissible
              variant="info"
            >
              <b>Hint:</b> use <code>CTRL+click</code> for multiple selection
            </b-alert>
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalShowTopics"
      title="Topics of this show"
      size="lg"
      @ok="saveTopics"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <p>Choose one or more topics for this show:</p>
            <b-form-select
              v-model="array"
              multiple
              :options="showTopicsSelector"
              :select-size="5"
            />
            <br><br>
            <b-alert
              show
              dismissible
              variant="info"
            >
              <b>Hint:</b> use <code>CTRL+click</code> for multiple selection
            </b-alert>
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalShowMusicFocus"
      title="Music focus of this show"
      size="lg"
      @ok="saveMusicFocus"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <p>Choose none, one or more music foci for this show:</p>
            <b-form-select
              v-model="array"
              multiple
              :options="showMusicFocusSelector"
              :select-size="5"
            />
            <br><br>
            <b-alert
              show
              dismissible
              variant="info"
            >
              <b>Hint:</b> use <code>CTRL+click</code> for multiple selection
            </b-alert>
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalShowLanguages"
      title="Languages of this show"
      size="lg"
      @ok="saveLanguages"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <p>Choose one or more languages for this show:</p>
            <b-form-select
              v-model="array"
              multiple
              :options="showLanguagesSelector"
              :select-size="5"
            />
            <br><br>
            <b-alert
              show
              dismissible
              variant="info"
            >
              <b>Hint:</b> use <code>CTRL+click</code> for multiple selection
            </b-alert>
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalShowHosts"
      title="Hosts of this show"
      size="lg"
      @ok="saveHosts"
    >
      <b-row>
        <b-col align="center">
          <div v-if="!loaded">
            <img
              src="../assets/radio.gif"
              alt="loading data"
            >
          </div>
          <div v-else>
            <p>Choose one or more hosts for this show:</p>
            <b-form-select
              v-model="array"
              multiple
              :options="showHostsSelector"
              :select-size="5"
            />
            <br><br>
            <b-alert
              show
              dismissible
              variant="info"
            >
              <b>Hint:</b> use <code>CTRL+click</code> for multiple selection
            </b-alert>
          </div>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalLogo"
      title="Logo of this show"
      size="lg"
      @ok="saveLogo"
    >
      <b-row>
        <b-col lg="4">
          <p>Current logo:</p>
        </b-col>
        <b-col lg="8">
          <p v-if="string.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <b-img
              thumbnail
              fluid
              :src="string"
            />
          </p>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <b-form-file
            ref="fileinputLogo"
            v-model="file"
            accept="image/jpeg, image/png"
            :state="Boolean(file)"
            placeholder="Choose a new logo..."
          />
        </b-col>
      </b-row>
    </b-modal>

    <b-modal
      ref="modalImage"
      title="Image of this show"
      size="lg"
      @ok="saveImage"
    >
      <b-row>
        <b-col lg="4">
          <p>Current image:</p>
        </b-col>
        <b-col lg="8">
          <p v-if="string.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <b-img
              thumbnail
              fluid
              :src="string"
            />
          </p>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <b-form-file
            ref="fileinputImage"
            v-model="file"
            accept="image/jpeg, image/png"
            :state="Boolean(file)"
            placeholder="Choose a new image..."
          />
        </b-col>
      </b-row>
    </b-modal>
  </div>
</template>

<script>
import axios from 'axios'
import showUpdates from '../mixins/showUpdates.js'

export default {
  mixins: [ showUpdates ],
  props: {
    show: { type: Object, required: true }
  },
  data () {
    return {
      /*
      We use a those variables for the modals as the model variable, which
      can be either a string, and id or an array, depending on the modal.
      For every parameter we also need a backup parmeter to reset our local
      show storage in case the API update in one of the save functions fails.
      */
      string: '',
      backupstring: '',
      id: 0,
      backupid: 0,
      array: [],
      backuparray: [],
      file: null,
      // we use this when opening modals, that have to fetch options through the API first.
      loaded: false,
      /*
      These are temporary storages when we fetch arrays from the API. We need
      them, because the show object only has arrays of ids and we have to
      translate those to the correct labels, which we only get through API
      calls.
      */
      types: [],
      fundingcategories: [],
      categories: [],
      topics: [],
      musicfocus: [],
      languages: [],
      hosts: []
    }
  },
  /*
  We use those computed properties for all modals that have select boxes
  which use a specific array format [{value:"",text:""},...] to render options.
  */
  computed: {
    showTypeSelector: function () {
      var options = []
      for (var i in this.types) {
        options.push({value: this.types[i].id, text: this.types[i].type})
      }
      return options
    },
    showFundingCategorySelector: function () {
      var options = []
      for (var i in this.fundingcategories) {
        options.push({value: this.fundingcategories[i].id, text: this.fundingcategories[i].abbrev + ' (' + this.fundingcategories[i].fundingcategory + ')', disabled: !this.fundingcategories[i].is_active})
      }
      return options
    },
    showPredecessorSelector: function () {
      var options = []
      options.push({value: null, text: '<i>... this show has no predecessor ...</i>'})
      for (var i in this.$parent.shows) {
        options.push({value: this.$parent.shows[i].id, text: this.$parent.shows[i].name})
      }
      return options
    },
    showCategorySelector: function () {
      var options = []
      for (var i in this.categories) {
        options.push({value: this.categories[i].id, text: this.categories[i].abbrev + ' (' + this.categories[i].category + ')', disabled: !this.categories[i].is_active})
      }
      return options
    },
    showTopicsSelector: function () {
      var options = []
      for (var i in this.topics) {
        options.push({value: this.topics[i].id, text: this.topics[i].abbrev + ' (' + this.topics[i].topic + ')', disabled: !this.topics[i].is_active})
      }
      return options
    },
    showMusicFocusSelector: function () {
      var options = []
      for (var i in this.musicfocus) {
        options.push({value: this.musicfocus[i].id, text: this.musicfocus[i].abbrev + ' (' + this.musicfocus[i].focus + ')', disabled: !this.musicfocus[i].is_active})
      }
      return options
    },
    showLanguagesSelector: function () {
      var options = []
      for (var i in this.languages) {
        options.push({value: this.languages[i].id, text: this.languages[i].name, disabled: !this.languages[i].is_active})
      }
      return options
    },
    showHostsSelector: function () {
      var options = []
      for (var i in this.hosts) {
        options.push({value: this.hosts[i].id, text: this.hosts[i].name, disabled: !this.hosts[i].is_active})
      }
      return options
    }
  },
  /*
  Here we start all methods needed to show the single modals and to update
  the info set through the modal.
  */
  methods: {
    /*
    Functions to update certain infos about a show should first check out a
    new show object with getUpdateShowObject and then modify / add those
    properties that actually get changed
    TODO: think about refactoring all those function to one or few functions
    */
    saveName (event) {
      if (this.string !== this.show.name) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.name = this.string
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.name = this.string
          this.$refs.modalShowName.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show name. See console for details.')
        })
      }
    },

    saveShortDescription (event) {
      if (this.string !== this.show.short_description) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.short_description = this.string
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.short_description = this.string
          this.$refs.modalShowShortDescription.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show\'s short description. See console for details.')
        })
      }
    },

    saveDescription (event) {
      if (this.string !== this.show.description) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        if (this.string === '') { updatedShow.description = null }
        else { updatedShow.description = this.string }
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.description = updatedShow.description
          this.$refs.modalShowDescription.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show description. See console for details.')
        })
      }
    },

    saveEmail (event) {
      if (this.string !== this.show.email) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        if (this.string === '') { updatedShow.email = null }
        else { updatedShow.email = this.string }
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.email = updatedShow.email
          this.$refs.modalShowEmail.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show e-mail contact. See console for details.')
        })
      }
    },

    saveWebsite (event) {
      if (this.string !== this.show.website) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        if (this.string === '') { updatedShow.website = null }
        else { updatedShow.website = this.string }
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.website = updatedShow.website
          this.$refs.modalShowWebsite.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show website. See console for details.')
        })
      }
    },

    saveCBAid (event) {
      if (this.id !== this.show.cba_series_id) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        if (this.id === '') { updatedShow.cba_series_id = null }
        else { updatedShow.cba_series_id = this.id }
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.cba_series_id = updatedShow.cba_series_id
          this.$refs.modalShowCBAid.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the CBA show id. See console for details.')
        })
      }
    },

    saveShowType (event) {
      if (this.id !== this.show.type) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.type = this.id
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.type = this.id
          this.$parent.getType()
          this.$refs.modalShowType.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show type. See console for details.')
        })
      }
    },

    savePredecessor (event) {
      if (this.id !== this.show.predecessor) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.predecessor = this.id
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.predecessor = this.id
          this.$refs.modalShowPredecessor.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show predecessor. See console for details.')
        })
      }
    },

    saveFundingCategory (event) {
      if (this.id !== this.show.fundingcategory) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.fundingcategory = this.id
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.fundingcategory = this.id
          this.$parent.getFundingCategory()
          this.$refs.modalShowType.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show\' funding category. See console for details.')
        })
      }
    },

    saveCategories (event) {
      this.$log.debug('saveCategories', this.array, this.show.category)
      if (this.array.length !== this.show.category.length || !this.array.every((value, index) => value === this.show.category[index])) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.category = this.array
        let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
        axios.put(uri, updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.$parent.shows[this.$parent.currentShow].category = this.array
          this.$parent.getCategories()
          this.$refs.modalShowCategories.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save categories. See console for details.')
        })
      }
    },

    saveTopics (event) {
      if (this.array.length !== this.show.topic.length || !this.array.every((value, index) => value === this.show.topic[index])) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.topic = this.array
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.topic = this.array
          this.$parent.getTopics()
          this.$refs.modalShowTopics.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show\'s topics. See console for details.')
        })
      }
    },

    saveMusicFocus (event) {
      if (this.array.length !== this.show.musicfocus.length || !this.array.every((value, index) => value === this.show.musicfocus[index])) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.musicfocus = this.array
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.musicfocus = this.array
          this.$parent.getMusicfocus()
          this.$refs.modalShowMusicFocus.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show\'s music focus. See console for details.')
        })
      }
    },
    saveLanguages (event) {
      if (this.array.length !== this.show.language.length || !this.array.every((value, index) => value === this.show.language[index])) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.language = this.array
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.language = this.array
          this.$parent.getLanguages()
          this.$refs.modalShowLanguages.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show\'s languages. See console for details.')
        })
      }
    },
    saveHosts (event) {
      if (this.array.length !== this.show.hosts.length || !this.array.every((value, index) => value === this.show.hosts[index])) {
        event.preventDefault()
        let updatedShow = this.getUpdateShowObject()
        updatedShow.hosts = this.array
        axios.put(process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/', updatedShow, {
          withCredentials: true,
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
        }).then(() => {
          this.show.hosts = this.array
          this.$parent.getHosts()
          this.$refs.modalShowHosts.hide()
        }).catch(error => {
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not save the show\'s hosts. See console for details.')
        })
      }
    },

    saveLogo (event) {
      event.preventDefault()
      if (this.file === null) { alert('Please provide a file to upload') }
      else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') { alert('Please provide a valid image file (JPEG or PNG)') }
      else {
        let formData = new FormData()
        this.backupstring = this.string
        // these propoerties have to be sent always (and they must not be null)
        formData.append('name', this.show.name)
        formData.append('slug', this.show.slug)
        formData.append('short_description', this.show.short_description)
        formData.append('type', this.show.type)
        formData.append('fundingcategory', this.show.fundingcategory)
        // now we append the new logo file
        formData.append('logo', this.file, this.file.name)
        // ok then, let's submit it
        let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
        axios.put(uri, formData, {
          withCredentials: true,
          headers: {
            'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
            'Content-Type': 'multipart/form-data',
          }
        }).then(() => {
          this.$parent.loadAndSwitch(this.$parent.currentShowID)
          this.$refs.modalLogo.hide()
        }).catch(error => {
          this.file = null
          this.string = this.backupstring
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not set new logo. See console for details.')
        })
      }
    },

    saveImage (event) {
      event.preventDefault()
      if (this.file === null) { alert('Please provide a file to upload') }
      else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') { alert('Please provide a valid image file (JPEG or PNG)') }
      else {
        let formData = new FormData()
        this.backupstring = this.string
        // these properties have to be sent always (and they must not be null)
        formData.append('name', this.show.name)
        formData.append('slug', this.show.slug)
        formData.append('short_description', this.show.short_description)
        formData.append('type', this.show.type)
        formData.append('fundingcategory', this.show.fundingcategory)
        // now we append the new image file
        formData.append('image', this.file, this.file.name)
        // ok then, let's submit it
        let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.show.id + '/'
        axios.put(uri, formData, {
          withCredentials: true,
          headers: {
            'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token,
            'Content-Type': 'multipart/form-data',
          }
        }).then(() => {
          this.$parent.loadAndSwitch(this.$parent.currentShowID)
          this.$refs.modalImage.hide()
        }).catch(error => {
          this.file = null
          this.string = this.backupstring
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could set new image. See console for details.')
        })
      }
    },
    /*
    Functions to activate modals
    They are called from the parent component
    */
    showName () {
      if (this.show.name !== null) { this.string = this.show.name }
      else { this.string = '' }
      this.$refs.modalShowName.show()
    },
    showShortDescription () {
      if (this.show.short_description !== null) { this.string = this.show.short_description }
      else { this.string = '' }
      this.$refs.modalShowShortDescription.show()
    },
    showDescription () {
      if (this.show.description !== null) { this.string = this.show.description }
      else { this.string = '' }
      this.$refs.modalShowDescription.show()
    },
    showEmail () {
      if (this.show.email !== null) { this.string = this.show.email }
      else { this.string = '' }
      this.$refs.modalShowEmail.show()
    },
    showWebsite () {
      if (this.show.website !== null) { this.string = this.show.website }
      else { this.string = '' }
      this.$refs.modalShowWebsite.show()
    },
    showCBAid () {
      this.id = this.show.cba_series_id
      this.$refs.modalShowCBAid.show()
    },
    showPredecessor () {
      this.id = this.show.predecessor
      this.$refs.modalShowPredecessor.show()
    },
    showType () {
      this.id = this.show.type
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'types/?active=true', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.types = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load show types. See console for details.')
      })
      this.$refs.modalShowType.show()
    },
    showFundingCategory () {
      this.id = this.show.fundingcategory
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.fundingcategories = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load funding categories. See console for details.')
      })
      this.$refs.modalShowFundingCategory.show()
    },
    showCategories () {
      this.array = this.show.category
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'categories/', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.categories = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load categories. See console for details.')
      })
      this.$refs.modalShowCategories.show()
    },
    showTopics () {
      this.array = this.show.topic
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'topics/', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.topics = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load topics. See console for details.')
      })
      this.$refs.modalShowTopics.show()
    },
    showMusicFocus () {
      this.array = this.show.musicfocus
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'musicfocus/', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.musicfocus = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load music foci. See console for details.')
      })
      this.$refs.modalShowMusicFocus.show()
    },
    showLanguages () {
      this.array = this.show.language
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'languages/', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.languages = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load languages. See console for details.')
      })
      this.$refs.modalShowLanguages.show()
    },
    showHosts () {
      this.array = this.show.hosts
      this.loaded = false
      axios.get(process.env.VUE_APP_API_STEERING + 'hosts/', {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        this.hosts = response.data
        this.loaded = true
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not load hosts. See console for details.')
      })
      this.$refs.modalShowHosts.show()
    },
    showLogo () {
      if (this.show.logo === null) { this.string = '' }
      else { this.string = this.show.logo }
      this.file = null
      this.$refs.modalLogo.show()
    },
    showImage () {
      if (this.show.image === null) { this.string = '' }
      else { this.string = this.show.image }
      this.file = null
      this.$refs.modalImage.show()
    }
  }
}
</script>

<style scoped>

</style>