<template>
  <div>
    <b-row>
      <!-- Categories -->
      <b-col lg="2">
        <b-badge style="width:80%;">
          Categories:
        </b-badge> <img
          src="../../assets/16x16/emblem-system.png"
          alt="edit"
          @click="openModalCategories()"
        >
      </b-col>
      <b-col lg="4">
        <div v-if="loaded.categories">
          <p v-if="categoryNames.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <ul>
              <li
                v-for="cat in categoryNames"
                :key="cat.id"
              >
                {{ cat.category }}
              </li>
            </ul>
          </p>
        </div>
        <div v-else>
          <img
            src="../../assets/radio.gif"
            height="24px"
            alt="loading data"
          ><br>
        </div>
      </b-col>

      <!-- Topics -->
      <b-col lg="2">
        <b-badge style="width:80%;">
          Topics:
        </b-badge> <img
          src="../../assets/16x16/emblem-system.png"
          alt="edit"
          @click="openModalTopics()"
        >
      </b-col>
      <b-col lg="4">
        <div v-if="loaded.topics">
          <p v-if="topicNames.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <ul>
              <li
                v-for="topic in topicNames"
                :key="topic.id"
              >
                {{ topic.topic }}
              </li>
            </ul>
          </p>
        </div>
        <div v-else>
          <img
            src="../../assets/radio.gif"
            height="24px"
            alt="loading data"
          ><br>
        </div>
      </b-col>

      <!-- Music focus -->
      <b-col lg="2">
        <b-badge style="width:80%;">
          Musicfocus:
        </b-badge> <img
          src="../../assets/16x16/emblem-system.png"
          alt="edit"
          @click="openModalMusicFocus()"
        >
      </b-col>
      <b-col lg="4">
        <div v-if="loaded.musicfocus">
          <p v-if="musicfocusNames.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <ul>
              <li
                v-for="focus in musicfocusNames"
                :key="focus.id"
              >
                {{ focus.focus }}
              </li>
            </ul>
          </p>
        </div>
        <div v-else>
          <img
            src="../../assets/radio.gif"
            height="24px"
            alt="loading data"
          ><br>
        </div>
      </b-col>

      <!-- Languages -->
      <b-col lg="2">
        <b-badge style="width:80%;">
          Languages:
        </b-badge> <img
          src="../../assets/16x16/emblem-system.png"
          alt="edit"
          @click="openModalLanguages()"
        >
      </b-col>
      <b-col lg="4">
        <div v-if="loaded.languages">
          <p v-if="languageNames.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <ul>
              <li
                v-for="lang in languageNames"
                :key="lang.id"
              >
                {{ lang.name }}
              </li>
            </ul>
          </p>
        </div>
        <div v-else>
          <img
            src="../../assets/radio.gif"
            height="24px"
            alt="loading data"
          ><br>
        </div>
      </b-col>

      <!-- Hosts -->
      <b-col lg="2">
        <b-badge style="width:80%;">
          Hosts:
        </b-badge> <img
          src="../../assets/16x16/emblem-system.png"
          alt="edit"
          @click="openModalHosts()"
        >
      </b-col>
      <b-col lg="4">
        <div v-if="loaded.hosts">
          <p v-if="hostNames.length === 0">
            <small><i>(none set)</i></small>
          </p>
          <p v-else>
            <!-- TODO: make link on name; when user clicks, open modal to edit host -->
            <ul>
              <li
                v-for="host in hostNames"
                :key="host.id"
              >
                {{ host.name }}
              </li>
            </ul>
          </p>
        </div>
        <div v-else>
          <img
            src="../../assets/radio.gif"
            height="24px"
            alt="loading data"
          ><br>
        </div>
      </b-col>
    </b-row>

    <!-- Modals to edit the above -->
    <div>
      <b-modal
        ref="modalCategories"
        title="Categories of this show"
        size="lg"
        @ok="saveCategories"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.categories">
              <img
                src="../../assets/radio.gif"
                alt="loading data"
              >
            </div>
            <div v-else>
              <p>Choose one or more categories for this show:</p>
              <b-form-select
                v-model="array"
                multiple
                :options="categorySelector"
                :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="modalTopics"
        title="Topics of this show"
        size="lg"
        @ok="saveTopics"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.topics">
              <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="topicSelector"
                :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="modalMusicFocus"
        title="Music focus of this show"
        size="lg"
        @ok="saveMusicFocus"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.musicfocus">
              <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="musicFocusSelector"
                :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="modalLanguages"
        title="Languages of this show"
        size="lg"
        @ok="saveLanguages"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.languages">
              <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="languageSelector"
                :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="modalHosts"
        title="Hosts of this show"
        size="lg"
        @ok="saveHosts"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.hosts">
              <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="hostSelector"
                :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>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      array: [],
    }
  },
  computed: {
    shows () { return this.$store.state.shows.shows },
    isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
        types: this.$store.state.shows.loaded.types,
        fundingcategories: this.$store.state.shows.loaded.fundingcategories,
        owners: false,
        categories: this.$store.state.shows.loaded.categories,
        topics: this.$store.state.shows.loaded.topics,
        musicfocus: this.$store.state.shows.loaded.musicfocus,
        languages: this.$store.state.shows.loaded.languages,
        hosts: this.$store.state.shows.loaded.hosts,
      }
    },

    categorySelector () {
      let options = []
      for (let 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
    },
    categoryNames () {
      let items = []
      for (let i in this.selectedShow.category) {
        items.push(this.categories.find(h => h.id === this.selectedShow.category[i]))
      }
      return items
    },
    topicSelector () {
      let options = []
      for (let 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
    },
    topicNames () {
      let items = []
      for (let i in this.selectedShow.topic) {
        items.push(this.topics.find(h => h.id === this.selectedShow.topic[i]))
      }
      return items
    },
    musicFocusSelector () {
      let options = []
      for (let 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
    },
    musicfocusNames () {
      let items = []
      for (let i in this.selectedShow.musicfocus) {
        items.push(this.musicfocus.find(h => h.id === this.selectedShow.musicfocus[i]))
      }
      return items
    },
    languageSelector () {
      let options = []
      for (let i in this.languages) {
        options.push({value: this.languages[i].id, text: this.languages[i].name, disabled: !this.languages[i].is_active})
      }
      return options
    },
    languageNames () {
      let items = []
      for (let i in this.selectedShow.language) {
        items.push(this.languages.find(h => h.id === this.selectedShow.language[i]))
      }
      return items
    },
    hostSelector () {
      let options = []
      for (let i in this.hosts) {
        options.push({value: this.hosts[i].id, text: this.hosts[i].name, disabled: !this.hosts[i].is_active})
      }
      return options
    },
    hostNames () {
      let items = []
      for (let i in this.selectedShow.hosts) {
        items.push(this.hosts.find(h => h.id === this.selectedShow.hosts[i]))
      }
      return items
    },

    ...mapGetters({
      selectedShow: 'shows/selectedShow',
      categories: 'shows/categories',
      topics: 'shows/topics',
      musicfocus: 'shows/musicfocus',
      languages: 'shows/languages',
      hosts: 'shows/hosts',
    })
  },
  methods: {
    openModalCategories () {
      this.array = this.selectedShow.category
      this.$refs.modalCategories.show()
    },
    openModalTopics () {
      this.array = this.selectedShow.topic
      this.$refs.modalTopics.show()
    },
    openModalMusicFocus () {
      this.array = this.selectedShow.musicfocus
      this.$refs.modalMusicFocus.show()
    },
    openModalLanguages () {
      this.array = this.selectedShow.language
      this.$refs.modalLanguages.show()
    },
    openModalHosts () {
      this.array = this.selectedShow.hosts
      this.$refs.modalHosts.show()
    },

    saveArray (property, value, modal, event) {
      if (
        value.length !== this.selectedShow[property].length ||
        !value.every((value, index) => value === this.selectedShow[property][index])
      ) {
        event.preventDefault()
        this.$store.dispatch('shows/updateProperty', {
          id: this.selectedShow.id,
          property: property,
          value: value,
          callback: () => {
            modal.hide()
          }
        })
      }
    },

    saveCategories (event) {
      this.saveArray('category', this.array, this.$refs.modalCategories, event)
    },
    saveTopics () {
      this.saveArray('topic', this.array, this.$refs.modalTopics, event)
    },
    saveMusicFocus () {
      this.saveArray('musicfocus', this.array, this.$refs.modalMusicFocus, event)
    },
    saveLanguages () {
      this.saveArray('language', this.array, this.$refs.modalLanguages, event)
    },
    saveHosts () {
      this.saveArray('hosts', this.array, this.$refs.modalHosts, event)
    },
  }
}
</script>