<template>
  <div>
    <b-row>
      <!-- Categories -->
      <b-col lg="3">
        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.categories') }}: </b-badge>
        <img
          src="/assets/edit.svg"
          class="tw-w-4 tw-cursor-pointer"
          :alt="$t('showMeta.editCategories')"
          @click="openModalCategories()"
        />
      </b-col>
      <b-col lg="3">
        <div v-if="loaded.categories">
          <p v-if="categoryNames.length === 0">
            <small
              ><i>{{ $t('noneSetFeminine') }}</i></small
            >
          </p>
          <ul v-else>
            <li v-for="cat in categoryNames" :key="cat.id">
              {{ cat.category }}
            </li>
          </ul>
        </div>
        <div v-else><img src="/assets/radio.gif" height="24px" :alt="$t('loading')" /><br /></div>
      </b-col>

      <!-- Topics -->
      <b-col lg="3">
        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.topics') }}: </b-badge>
        <img
          src="/assets/edit.svg"
          class="tw-w-4 tw-cursor-pointer"
          :alt="$t('showMeta.editTopics')"
          @click="openModalTopics()"
        />
      </b-col>
      <b-col lg="3">
        <div v-if="loaded.topics">
          <p v-if="topicNames.length === 0">
            <small
              ><i>{{ $t('noneSetFeminine') }}</i></small
            >
          </p>
          <ul v-else>
            <li v-for="topic in topicNames" :key="topic.id">
              {{ topic.topic }}
            </li>
          </ul>
        </div>
        <div v-else><img src="/assets/radio.gif" height="24px" :alt="$t('loading')" /><br /></div>
      </b-col>

      <!-- Music focus -->
      <b-col lg="3">
        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.genres') }}: </b-badge>
        <img
          src="/assets/edit.svg"
          class="tw-w-4 tw-cursor-pointer"
          :alt="$t('showMeta.editGenres')"
          @click="openModalMusicFocus()"
        />
      </b-col>
      <b-col lg="3">
        <div v-if="loaded.musicfocus">
          <p v-if="musicfocusNames.length === 0">
            <small
              ><i>{{ $t('noneSetFeminine') }}</i></small
            >
          </p>
          <ul v-else>
            <li v-for="focus in musicfocusNames" :key="focus.id">
              {{ focus.focus }}
            </li>
          </ul>
        </div>
        <div v-else><img src="/assets/radio.gif" height="24px" :alt="$t('loading')" /><br /></div>
      </b-col>

      <!-- Languages -->
      <b-col lg="3">
        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.languages') }}: </b-badge>
        <img
          src="/assets/edit.svg"
          class="tw-w-4 tw-cursor-pointer"
          :alt="$t('showMeta.editLanguages')"
          @click="openModalLanguages()"
        />
      </b-col>
      <b-col lg="3">
        <div v-if="loaded.languages">
          <p v-if="languageNames.length === 0">
            <small
              ><i>{{ $t('noneSetFeminine') }}</i></small
            >
          </p>

          <ul v-else>
            <li v-for="lang in languageNames" :key="lang.id">
              {{ lang.name }}
            </li>
          </ul>
        </div>
        <div v-else><img src="/assets/radio.gif" height="24px" :alt="$t('loading')" /><br /></div>
      </b-col>

      <!-- Hosts -->
      <b-col lg="3">
        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.hosts') }}: </b-badge>
        <img
          src="/assets/edit.svg"
          class="tw-w-4 tw-cursor-pointer"
          :alt="$t('showMeta.editHosts')"
          @click="openModalHosts()"
        />
      </b-col>
      <b-col lg="3">
        <div v-if="loaded.hosts">
          <p v-if="hostNames.length === 0">
            <small
              ><i>{{ $t('noneSetFeminine') }}</i></small
            >
          </p>
          <!-- TODO: make link on name; when user clicks, open modal to edit host -->
          <ul v-else>
            <li v-for="host in hostNames" :key="host.id">
              {{ host.name }}
            </li>
          </ul>
        </div>
        <div v-else><img src="/assets/radio.gif" height="24px" :alt="$t('loading')" /><br /></div>
      </b-col>
    </b-row>

    <!-- Modals to edit the above -->
    <div>
      <b-modal
        ref="modalCategories"
        :title="$t('showMeta.editCategories')"
        :cancel-title="$t('cancel')"
        size="lg"
        @ok="saveCategories"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.categories">
              <img src="/assets/radio.gif" :alt="$t('loading')" />
            </div>
            <div v-else>
              <p>{{ $t('showMeta.categoriesLabel') }}:</p>
              <b-form-select
                v-model="array"
                multiple
                :options="categorySelector"
                :select-size="5"
              />
              <br /><br />
              <b-alert show dismissible variant="info">
                <span v-html="$t('showMeta.multiselect')" />
              </b-alert>
            </div>
          </b-col>
        </b-row>
      </b-modal>

      <b-modal
        ref="modalTopics"
        :title="$t('showMeta.editTopics')"
        :cancel-title="$t('cancel')"
        size="lg"
        @ok="saveTopics"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.topics">
              <img src="/assets/radio.gif" :alt="$t('loading')" />
            </div>
            <div v-else>
              <p>{{ $t('showMeta.topicsLabel') }}:</p>
              <b-form-select v-model="array" multiple :options="topicSelector" :select-size="5" />
              <br /><br />
              <b-alert show dismissible variant="info">
                <span v-html="$t('showMeta.multiselect')" />
              </b-alert>
            </div>
          </b-col>
        </b-row>
      </b-modal>

      <b-modal
        ref="modalMusicFocus"
        :title="$t('showMeta.editGenres')"
        :cancel-title="$t('cancel')"
        size="lg"
        @ok="saveMusicFocus"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.musicfocus">
              <img src="/assets/radio.gif" :alt="$t('loading')" />
            </div>
            <div v-else>
              <p>{{ $t('showMeta.genresLabel') }}:</p>
              <b-form-select
                v-model="array"
                multiple
                :options="musicFocusSelector"
                :select-size="5"
              />
              <br /><br />
              <b-alert show dismissible variant="info">
                <span v-html="$t('showMeta.multiselect')" />
              </b-alert>
            </div>
          </b-col>
        </b-row>
      </b-modal>

      <b-modal
        ref="modalLanguages"
        :title="$t('showMeta.editLanguages')"
        :cancel-title="$t('cancel')"
        size="lg"
        @ok="saveLanguages"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.languages">
              <img src="/assets/radio.gif" :alt="$t('loading')" />
            </div>
            <div v-else>
              <p>{{ $t('showMeta.languagesLabel') }}:</p>
              <b-form-select
                v-model="array"
                multiple
                :options="languageSelector"
                :select-size="5"
              />
              <br /><br />
              <b-alert show dismissible variant="info">
                <span v-html="$t('showMeta.multiselect')" />
              </b-alert>
            </div>
          </b-col>
        </b-row>
      </b-modal>

      <b-modal
        ref="modalHosts"
        :title="$t('showMeta.hosts')"
        :cancel-title="$t('cancel')"
        size="lg"
        @ok="saveHosts"
      >
        <b-row>
          <b-col align="center">
            <div v-if="!loaded.hosts">
              <img src="/assets/radio.gif" :alt="$t('loading')" />
            </div>
            <div v-else>
              <p>{{ $t('showMeta.hostsLabel') }}</p>
              <b-form-select v-model="array" multiple :options="hostSelector" :select-size="5" />
              <br /><br />
              <b-alert show dismissible variant="info">
                <span v-html="$t('showMeta.multiselect')" />
              </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() {
      const options = []
      for (const 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() {
      const items = []
      for (const i in this.selectedShow.category) {
        items.push(this.categories.find((h) => h.id === this.selectedShow.category[i]))
      }
      return items
    },
    topicSelector() {
      const options = []
      for (const 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() {
      const items = []
      for (const i in this.selectedShow.topic) {
        items.push(this.topics.find((h) => h.id === this.selectedShow.topic[i]))
      }
      return items
    },
    musicFocusSelector() {
      const options = []
      for (const 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() {
      const items = []
      for (const i in this.selectedShow.musicfocus) {
        items.push(this.musicfocus.find((h) => h.id === this.selectedShow.musicfocus[i]))
      }
      return items
    },
    languageSelector() {
      const options = []
      for (const 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() {
      const items = []
      for (const i in this.selectedShow.language) {
        items.push(this.languages.find((h) => h.id === this.selectedShow.language[i]))
      }
      return items
    },
    hostSelector() {
      const options = []
      for (const 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() {
      const items = []
      for (const 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>