<template>
  <div
    tabindex="-1"
    @keyup.left="previousActivePoint"
    @keyup.right="nextActivePoint"
    style="outline: none"
  >
    <ImageDialog v-show="showImageDialog" />
    <HelpDialog v-if="showHelpDialog" />
    <Header />
    <div :style="'height: ' + spacerHeight + 'px'" />
    <Sticks />
  </div>
</template>

<script>
import Sticks from '@/components/Sticks.vue'
import ImageDialog from '@/components/image-dialog/ImageDialog.vue'
import Header from '@/components/header/Header.vue'
import HelpDialog from '@/components/HelpDialog.vue'

export default {
  // Component DatasetView
  // Contains the whole visualization and control.
  name: 'DatasetView',
  components: {
    ImageDialog,
    Header,
    Sticks,
    HelpDialog
  },
  computed: {
    sticks() {
      return this.$store.state.sticks
    },
    stickIDs() {
      return this.$store.getters.stickIDs
    },
    cameraIDs() {
      return this.$store.getters.cameraIDs
    },
    showImageDialog() {
      return this.$store.getters.showImageDialog
    },
    showHelpDialog() {
      return this.$store.getters.showHelpDialog
    },
    activeStick() {
      return this.$store.getters.activeStick
    },
    activeCamera() {
      return this.$store.getters.activeCamera
    },
    activeImageName() {
      return this.$store.getters.activeImageName(this.activeCamera)
    },
    pendingPostRequestsCount() {
      return this.$store.getters.pendingPostRequestsCount
    },
    cameraStatusGUI() {
      let result = {}
      for (const ID of this.cameraIDs) {
        result[ID] = this.$store.getters.cameraStatusGUI(ID)
      }
      return result
    },
    spacerHeight() {
      let height = 55
      for (const ID in this.cameraStatusGUI) {
        if (this.cameraStatusGUI[ID] === 'minimized') {
          height += 50
        } else {
          height += 120
        }
      }
      if (this.activeStick !== null) {
        height += 75
      }
      return height
    }
  },
  methods: {
    previousActivePoint() {
      if (!this.activeCamera || !this.activeStick) {
        return
      }
      const newImageName = this.$store.getters.previousImageName(
        this.activeCamera,
        this.activeImageName
      )
      if (this.activeStick && newImageName) {
        this.$store.dispatch('setActivePoint', {
          stickID: this.activeStick,
          cameraID: this.activeCamera,
          imageName: newImageName
        })
      }
    },
    nextActivePoint() {
      if (!this.activeCamera || !this.activeStick) {
        return
      }
      const newImageName = this.$store.getters.nextImageName(
        this.activeCamera,
        this.activeImageName
      )
      if (this.activeStick && newImageName) {
        this.$store.dispatch('setActivePoint', {
          stickID: this.activeStick,
          cameraID: this.activeCamera,
          imageName: newImageName
        })
      }
    }
  },
  created() {
    this.$store.dispatch('loadMetadata').then(() => {
      this.cameraIDs.forEach(cam => {
        this.$store.dispatch('loadDataByCamera', cam)
      })
    })
  }
}
</script>

<style lang="scss" scoped></style>
