<template>
  <div class="cropped-image">
    <div class="close-button"
         @mousedown.prevent="$emit('close', true)"
         @touchstart.prevent="$emit('close', true)">
      <img alt="close button" src="@/assets/icons/cross.svg">
    </div>

    <div v-if="src" class="image-container">
      <h3>{{ label }}</h3>

      <img alt="crop" :src="src"/>
    </div>
    <div v-else>
      click a bounding box
    </div>
  </div>
</template>

<script>
export default {
  name: "cropped-image",
  props: ['labels', 'file', 'box'],
  computed: {
    src: function () {
      if (!this.box)
        return false;

      const file = this.file.identifier;
      const uuid = this.file.uuid;
      const x = this.box.data.x;
      const y = this.box.data.y;
      const w = this.box.data.w;
      const h = this.box.data.h;

      return this.$root.socket.url(`/data/${file}/1024/${x}x${y}x${w}x${h}?uuid=${uuid}`)
    },
    label: function () {
      if (!this.box)
        return false;
      if (this.box.label_id == null)
        return 'Unknown'

      for (let label of this.labels)
        if (label.identifier === this.box.label_id)
          return label.name;

      return 'Not found';
    }
  }
}
</script>

<style scoped>
.cropped-image {
  width: 40%;
  height: 100%;
  background-color: #858585;
  position: relative;
  padding: 2rem 1rem;
  text-align: center;
}

.close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem 0.67rem;
  cursor: pointer;
  filter: invert(1);
}

.close-button img {
  width: 1.5rem;
}

.image-container img {
  border: 2px solid;
  max-width: 100%;
}
</style>
