<template>
  <div class="gallery-container">
    <div
      v-for="(image, imageName) in closeImageNames"
      :key="imageName"
      class="image-container"
    >
      <div>
        <check-icon
          class="approved-icon"
          v-if="$store.getters.flagImageApprovedByUser(cameraID, imageName)"
        />
        <svg
          viewBox="0 0 40 30"
          class="discarded-overlay"
          v-if="$store.getters.flagImageDiscardedByUser(cameraID, imageName)"
        >
          <line x1="5" y1="5" x2="35" y2="25" />
          <line x1="35" y1="5" x2="5" y2="25" />
        </svg>
        <img
          :src="image"
          :class="{
            selectedImage: activeImageName === imageName,
            'discarded-image': chartData[imageName].discardedByUser,
            image
          }"
          @click="onClick(imageName)"
        />
      </div>
      {{ imageName }}
    </div>
  </div>
</template>

<script>
import CheckIcon from 'icons/Check'

export default {
  name: 'Gallery',
  components: {
    CheckIcon
  },
  data() {
    return {
      imageCount: 9 // Should be an odd number.
    }
  },
  computed: {
    cameraID() {
      return this.$store.getters.activeCamera
    },
    stickID() {
      return this.$store.getters.activeStick
    },
    activeImageName() {
      return this.$store.getters.activeImageName(this.cameraID)
    },
    chartData() {
      return this.$store.getters.chartData(this.cameraID)
    },
    closeImageNames() {
      let result = {}
      let chronology = this.$store.getters.getCameraImagesChronology(
        this.cameraID
      )

      let halfCount = (this.imageCount - 1) / 2
      let firstIndex = null
      if (chronology.lookup[this.activeImageName] < halfCount) {
        firstIndex = 0
      } else if (
        chronology.lookup[this.activeImageName] + halfCount >
        chronology.order.length
      ) {
        firstIndex = chronology.order.length - this.imageCount
      } else {
        firstIndex = chronology.lookup[this.activeImageName] - halfCount
      }

      for (let i = firstIndex; i < firstIndex + this.imageCount; i++) {
        result[chronology.order[i]] = this.$store.getters.imageURL(
          this.cameraID,
          chronology.order[i]
        )
      }

      return result
    }
  },
  methods: {
    onClick(imageName) {
      this.$store.dispatch('setActivePoint', {
        stickID: this.stickID,
        cameraID: this.cameraID,
        imageName
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.gallery-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.image-container {
  position: relative;
}

.image {
  width: 90%;
  border-radius: 5px;
}

.discarded-image {
  opacity: 20%;
}

.selectedImage {
  border: 3px solid var(--color-accent-3);
}

.approved-icon {
  position: absolute;
  right: 10px;
  bottom: 25px;
}

.approved-icon svg {
  fill: var(--color-accent-2);
}

.discarded-overlay {
  position: absolute;
  left: 5%;
  top: 0px;
  width: 90%;
  opacity: 0.3;
}
.discarded-overlay * {
  stroke: var(--color-accent-3);
  stroke-width: 6;
  stroke-linecap: round;
}
</style>
