<template>
  <div class="media-control">
    <button-input ref="previousPage"
                  type="transparent"
                  title="previous page (W)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasPreviousPage}"
                  @click="$emit('previousPage', true)">
      &lt;&lt;
    </button-input>

    <button-input ref="previousElement"
                  type="transparent"
                  title="previous element (A)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasPreviousElement}"
                  @click="$emit('previousElement', true)">
      &lt;
    </button-input>

    <select v-if="collections.length > 0"
            @change="filter">
      <option>no filter</option>
      <option>without collection</option>

      <option v-for="collection in collections" :key="collection.identifier"
              :value="collection.identifier"
              :selected="collection.autoselect">
        {{ collection.name }}
      </option>
    </select>

    <button-input ref="nextElement"
                  type="transparent"
                  title="next element (D)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasNextElement}"
                  @click="$emit('nextElement', true)">
      &gt;
    </button-input>

    <button-input ref="nextPage"
                  type="transparent"
                  title="next page (S)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasNextPage}"
                  @click="$emit('nextPage', true)">
      &gt;&gt;
    </button-input>
  </div>
</template>

<script>
import ButtonInput from "@/components/base/button-input";

export default {
  name: "media-control",
  components: {ButtonInput},
  props: ['current', 'hasPreviousPage', 'hasNextPage', 'hasPreviousElement', 'hasNextElement'],
  created: function () {
    window.addEventListener('keypress', this.keypressEvent);

    // receive collections
    this.$root.socket.get(`/projects/${this.$root.project.identifier}/collections`)
        .then(response => response.json())
        .then(collections => {
          this.collections = collections;

          for (let collection of collections)
            if (collection.autoselect)
              this.$emit('filter', collection.identifier);
        });
  },
  destroyed: function () {
    window.removeEventListener('keypress', this.keypressEvent);
  },
  data: function () {
    return {
      collections: []
    }
  },
  methods: {
    keypressEvent: function (event) {
      switch (event.key) {
        case 'w':
          this.$refs.previousPage.click();
          break;
        case 'a':
          this.$refs.previousElement.click();
          break;
        case 'd':
          this.$refs.nextElement.click();
          break;
        case 's':
          this.$refs.nextPage.click();
          break;
      }
    },
    filter: function (e) {
      const select = e.target;
      switch (select.selectedIndex) {
          // no filter
        case 0:
          this.$emit('filter', false);
          break;

          // without collection
        case 1:
          this.$emit('filter', null);
          break;

          // other
        default:
          this.$emit('filter', select.options[select.selectedIndex].value);
          break;
      }
    }
  }
}
</script>

<style scoped>
.media-control {
  background-color: rgba(0, 0, 0, 0.75);
  color: whitesmoke;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.button-input {
  font-size: 110%;
  font-weight: bold;
}

.disabled {
  opacity: 0.4;
}

select {
  flex-grow: 1;
  max-width: 15rem;
  margin: 0 1rem;
}
</style>