<template>
  <div class="options-bar">
    <div ref="draw_box"
         class="icon"
         title="draw bounding box (Q)"
         :class="{active: interaction === 'draw-box'}"
         @click="$emit('interaction', 'draw-box')">
      <img alt="draw bounding box" src="@/assets/icons/screen-full.svg">
    </div>


    <div ref="estimate_box"
         class="icon"
         title="estimate bounding box (W)"
         :class="{active: interaction === 'estimate-box'}"
         @click="$emit('interaction', 'estimate-box')">
      <img alt="estimate bounding box" src="@/assets/icons/paper-airplane.svg">
    </div>

    <div ref="extreme_clicking"
         class="icon"
         title="extreme clicking (E)"
         :class="{active: interaction === 'extreme-clicking'}"
         @click="$emit('interaction', interaction === 'extreme-clicking' ? 'draw-box' : 'extreme-clicking')">
      <img v-if="interaction === 'extreme-clicking'"
           alt="extreme clicking" src="@/assets/icons/check.svg">
      <img v-else
           alt="extreme clicking" src="@/assets/icons/flame.svg">
    </div>
    <div class="spacer"/>

    <div ref="move_box"
         class="icon"
         title="move and resize bounding box (R)"
         :class="{active: interaction === 'move-box'}"
         @click="$emit('interaction', 'move-box')">
      <img alt="move and resize bounding box" src="@/assets/icons/four-directions.svg">
    </div>

    <div v-if="labelsEnabled"
         ref="labels"
         class="icon"
         title="label bounding box (T)"
         :class="{active: interaction === 'label-box'}"
         @click="$emit('labelSelector')">
      <img alt="label bounding box" src="@/assets/icons/tag.svg">
    </div>

    <div ref="confirm_box"
         class="icon"
         title="confirm bounding box (G)"
         :class="{active: interaction === 'confirm-box'}"
         @click="$emit('interaction', 'confirm-box')">
      <img alt="confirm bounding box" src="@/assets/icons/check-circle.svg">
    </div>

    <div ref="confirm_all"
         class="icon"
         title="confirm all bounding boxes (H)"
         :class="{active: interaction === 'confirm-box'}"
         @click="confirmAll">
      <img alt="confirm all bounding boxes" src="@/assets/icons/check-all.svg">
    </div>

    <div ref="remove_box"
         class="icon"
         title="remove bounding box (F)"
         :class="{active: interaction === 'remove-box'}"
         @click="$emit('interaction', 'remove-box')">
      <img alt="remove bounding box" src="@/assets/icons/trash.svg">
    </div>

    <div class="spacer"/>

    <div ref="crop_info"
         class="icon"
         title="Show info of a bounding box (I)"
         :class="{active: interaction === 'info-box'}"
         @click="$emit('interaction', 'info-box')">
      <img alt="zoom bounding box" src="@/assets/icons/info.svg">
    </div>

    <!--
    <div ref="zoom_annotation"
         class="icon"
         title="zoom bounding box (X)"
         :class="{active: interaction === 'zoom-box' || zoomBox}"
         @click="$emit(zoomBox ? 'unzoom' : 'interaction', 'zoom-box')">
      <img alt="zoom bounding box" src="@/assets/icons/codescan.svg">
    </div>

    <div ref="zoom_prev_annotation"
         class="icon"
         title="zoom previous bounding box (C)"
         @click="$emit('prevzoom', true)">
      <img alt="zoom previous bounding box" src="@/assets/icons/chevron-left.svg">
    </div>

    <div ref="zoom_next_annotation"
         class="icon"
         title="zoom next bounding box (V)"
         @click="$emit('nextzoom', true)">
      <img alt="zoom next bounding box" src="@/assets/icons/chevron-right.svg">
    </div>
    -->

    <div class="spacer"/>

    <div ref="show_user_annotations"
         class="icon"
         title="show user annotations"
         :class="{active: filter && filter.includes('user')}"
         @click="invertFilter('user')">
      <img alt="show user annotations" src="@/assets/icons/smiley.svg">
    </div>

    <div ref="show_pipeline_annotations"
         class="icon"
         title="show pipeline annotations"
         :class="{active: filter && filter.includes('pipeline')}"
         @click="invertFilter('pipeline')">
      <img alt="show pipeline annotations" src="@/assets/icons/cpu.svg">
    </div>

    <div class="spacer"/>

    <div ref="create_predictions"
         class="icon"
         title="create predictions (B)"
         :class="{active: isPredictionRunning}"
         @click="predict">
      <img alt="create predictions" src="@/assets/icons/rocket.svg">
    </div>
  </div>
</template>

<script>

export default {
  name: "options-bar",
  props: [
    'file',
    'interaction',
    'filter',
    'labelsEnabled',
  ],
  created: function () {
    // get data
    this.getJobs();

    // subscribe to changes
    this.$root.socket.on('connect', this.getJobs);
    this.$root.socket.on('create-job', this.addJob);
    this.$root.socket.on('remove-job', this.removeJob);
    this.$root.socket.on('edit-job', this.editJob);

    // subscribe to keypress events
    window.addEventListener('keypress', this.keypressEvent);
  },
  destroyed: function () {
    this.$root.socket.off('connect', this.getJobs);
    this.$root.socket.off('create-job', this.addJob);
    this.$root.socket.off('remove-job', this.removeJob);
    this.$root.socket.off('edit-job', this.editJob);

    window.removeEventListener('keypress', this.keypressEvent)
  },
  data: function () {
    return {
      jobs: [],
    }
  },
  computed: {
    isPredictionRunning: function () {
      return this.jobs.filter(j => !j.finished && j.type === 'Model Interaction').length > 0;
    }
  },
  methods: {
    invertFilter: function (name) {
      if (!this.filter)
        return;

      if (this.filter.includes(name))
        this.$emit('filter', this.filter.filter(f => f !== name));
      else
        this.$emit('filter', [...this.filter, name]);
    },

    predict: function () {
      if (this.isPredictionRunning)
        return
      this.$emit("predict", this.file.identifier);
    },

    confirmAll: function() {
      this.$emit("confirmAll", this.file.identifier);
    },

    keypressEvent: function (event) {
      switch (event.key) {
        case 'r':
          this.$refs.move_box.click();
          break;
        case 'q':
          this.$refs.draw_box.click();
          break;
        case 'w':
          this.$refs.estimate_box.click();
          break;
        case 'e':
          this.$refs.extreme_clicking.click();
          break;
        case 't':
          this.$refs.labels.click();
          event.preventDefault();
          break;
        case 'f':
          this.$refs.remove_box.click();
          break;
        case 'g':
          this.$refs.confirm_box.click();
          break;
        case 'h':
          this.$refs.confirm_all.click();
          break;
        case 'p':
          this.$refs.create_predictions.click();
          break;
        case 'i':
          this.$refs.crop_info.click();
          break;
      }
    },
    getJobs: function () {
      this.$root.socket.get('/jobs')
          .then(response => response.json())
          .then(jobs => {
            this.jobs = [];
            jobs.forEach(this.addJob)
          });
    },
    addJob: function (job) {
      for (let j of this.jobs)
        if (j.identifier === job.identifier)
          return;

      this.jobs.push(job);
    },
    removeJob: function (job) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].identifier === job.identifier) {
          this.jobs.splice(i, 1);
          return;
        }
      }
    },
    editJob: function (job) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].identifier === job.identifier) {
          this.$set(this.jobs, i, job);
          return;
        }
      }
    }
  }
}
</script>

<style scoped>
.options-bar {
  /* background-color: rgba(0, 0, 0, 0.25); */
  background-color: #858585;
  z-index: 1;
}

.spacer {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  margin: 0.4rem;
  border: 1px solid whitesmoke;
  border-radius: 0.5rem;

  width: 1.6rem;
  height: 1.6rem;
}

.icon.active {
  background-color: rgba(0, 0, 0, 0.2);
}

.icon:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

img {
  max-width: 1.1rem;
  max-height: 1.1rem;
  filter: invert(1);
}

</style>
