<template>
  <transition name="dialog">
    <div class="dialog-mask">
      <div class="dialog-container">
        {{ imageName }}
        <ImageDetail
          :cameraID="cameraID"
          :imageName="imageName"
          :showSnowMarkers="showMarkers"
          :showLabels="showLabels"
          :showSticks="showSticks"
          class="image-detail"
        />
        <close-icon
          class="icon close-button"
          @click="close"
          v-on:keyup.enter="close"
          v-on:keyup.esc="close"
        />
        <div class="controls">
          <div class="show-hide-controls card">
            <eye-icon
              class="icon"
              v-if="showSticks"
              @click="onToggleShowSticks"
            />
            <eye-off-icon class="icon" v-else @click="onToggleShowSticks" />
            <div>
              Stakes
            </div>
            <eye-icon
              class="icon"
              v-if="showMarkers"
              @click="onToggleShowMarkers"
            />
            <eye-off-icon class="icon" v-else @click="onToggleShowMarkers" />
            <div>
              Snow markers
            </div>
            <eye-icon
              class="icon"
              v-if="showLabels"
              @click="onToggleShowLabels"
            />
            <eye-off-icon class="icon" v-else @click="onToggleShowLabels" />
            <div>
              Labels
            </div>
          </div>

          <div class="editing-controls card">
            <div style="grid-area:add-title;">
              Add stake
            </div>
            <v-select
              style="grid-area:add-dropdown"
              :options="sticksNotVisible"
              label="name"
              v-model="addStick"
            />
            <plus-box-icon
              class="icon"
              style="grid-area:add-button;"
              @click="onAddStick"
            />

            <div style="grid-area:remove-title;">
              Remove stake
            </div>
            <v-select
              style="grid-area:remove-dropdown"
              :options="sticksVisible"
              label="name"
              v-model="removeStick"
            />
            <delete-icon
              class="icon"
              style="grid-area:remove-button;"
              @click="onRemoveStick"
            />
            <div style="grid-area:undo-text;">
              Undo changes
            </div>
            <undo-icon
              class="icon"
              @click="onRevertChangeToSticks"
              style="grid-area:undo-button;"
            />

            <div style="grid-area:time-shift-title;">
              Time shift
              <div class="tooltip">
                <help-circle-outline-icon class="tooltip-icon" />
                <span class="tooltip-text" style="top: -33px;"
                  >By changing time and date of this image, you shift the time
                  of the whole camera.</span
                >
              </div>
            </div>
            <TimeShift
              :cameraID="cameraID"
              :imageName="imageName"
              style="grid-area:time-shift;"
            />
          </div>

          <div class="image-controls card">
            <div style="grid-area:approve-title;">
              Approve image
              <div class="tooltip">
                <help-circle-outline-icon class="tooltip-icon" title="" />
                <span class="tooltip-text" style="top: -24px;"
                  >Image is approved automatically every time you edit the
                  image.</span
                >
              </div>
            </div>
            <checkbox-marked-outline-icon
              class="icon"
              style="grid-area:approve-button;"
              @click="unapproveImage"
              v-if="flagImageApprovedByUser"
            />
            <checkbox-blank-outline-icon
              class="icon"
              style="grid-area:approve-button;"
              @click="approveImage"
              v-else
            />

            <div style="grid-area:discard-title;">
              Discard image
              <div class="tooltip">
                <help-circle-outline-icon class="tooltip-icon" />
                <span class="tooltip-text card" style="top: -33px;"
                  >By discarding the image, you exclude it from further
                  analysis, but don't delete it.</span
                >
              </div>
            </div>
            <checkbox-marked-outline-icon
              class="icon"
              style="grid-area:discard-button;"
              @click="undiscardImage"
              v-if="flagImageDiscardedByUser"
            />
            <checkbox-blank-outline-icon
              class="icon"
              style="grid-area:discard-button;"
              @click="discardImage"
              v-else
            />
          </div>
        </div>
        <div class="info">
          <div class="image-info card">
            <div>Location:</div>
            <div>{{ location.name }}</div>
            <div>Coordinates:</div>
            <div>
              {{ location.latitude.toFixed(2) + '°' }},
              {{ location.longitude.toFixed(2) + '°' }}
            </div>
            <div>Date:</div>
            <div>{{ imageDate }}</div>
            <div>Time:</div>
            <div>{{ imageTime }}</div>
          </div>
          <div class="stick-info card">
            <div>Camera label:</div>
            <div>{{ cameraID }}</div>
            <div>Stake label:</div>
            <div>{{ stickViewLabel }}</div>
            <div>Stake height:</div>
            <div>{{ stickLengthCm }} cm</div>
            <div>Snow height:</div>
            <div>{{ snowHeight }} cm</div>
          </div>
        </div>
        <Gallery class="card gallery" />
      </div>
    </div>
  </transition>
</template>

<script>
import ImageDetail from '@/components/image-dialog/ImageDetail.vue'
import TimeShift from '@/components/image-dialog/TimeShift.vue'
import Gallery from '@/components/image-dialog/Gallery.vue'

import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'

import CloseIcon from 'icons/Close'
import EyeIcon from 'icons/Eye'
import EyeOffIcon from 'icons/EyeOff'
import PlusBoxIcon from 'icons/PlusBox'
import DeleteIcon from 'icons/Delete'
import UndoIcon from 'icons/Undo'
import CheckboxMarkedOutlineIcon from 'icons/CheckboxMarkedOutline'
import CheckboxBlankOutlineIcon from 'icons/CheckboxBlankOutline'
import HelpCircleOutlineIcon from 'icons/HelpCircleOutline'

export default {
  name: 'ImageDialog',
  components: {
    ImageDetail,
    TimeShift,
    Gallery,
    vSelect,

    CloseIcon,
    EyeIcon,
    EyeOffIcon,
    PlusBoxIcon,
    UndoIcon,
    DeleteIcon,
    CheckboxMarkedOutlineIcon,
    CheckboxBlankOutlineIcon,
    HelpCircleOutlineIcon
  },
  data() {
    return {
      showSticks: true,
      showLabels: true,
      showMarkers: true,
      addStick: {
        id: 0,
        name: ''
      },
      removeStick: {
        id: 0,
        name: ''
      },
      timeShiftTooltip: false,
      approveTooltip: false,
      discardTooltip: false
    }
  },
  computed: {
    cameraID() {
      return this.$store.getters.activeCamera
    },
    stickID() {
      return this.$store.getters.activeStick
    },
    imageName() {
      return this.$store.getters.activeImageName(this.cameraID)
    },
    location() {
      return this.$store.state.location
    },
    stickViewLabel() {
      if (this.stickID && this.cameraID) {
        return this.$store.getters.stickViewLabel(this.stickID, this.cameraID)
      }
      return ''
    },
    stickLengthCm() {
      return this.$store.getters.stickLengthCm(this.stickID)
    },
    imageDateTime() {
      if (this.cameraID && this.imageName) {
        return this.$store.getters.imageDateTime(this.cameraID, this.imageName)
      }
      return ''
    },
    imageDate() {
      return this.imageDateTime.split('T')[0]
    },
    imageTime() {
      return this.imageDateTime.split('T')[1]
    },
    sticksNotVisible() {
      const stickIDs = this.$store.getters.sticksNotVisible(
        this.cameraID,
        this.imageName
      )
      var result = []
      stickIDs.forEach(d => {
        result.push({
          id: d,
          name: this.$store.getters.stickViewLabel(d, this.cameraID)
        })
      })
      return result
    },
    sticksVisible() {
      const stickIDs = this.$store.getters.sticksVisible(
        this.cameraID,
        this.imageName
      )
      var result = []
      stickIDs.forEach(d => {
        result.push({
          id: d,
          name: this.$store.getters.stickViewLabel(d, this.cameraID)
        })
      })
      return result
    },
    imageConditions() {
      if (this.cameraID && this.imageName) {
        return this.$store.getters.imageConditions(
          this.cameraID,
          this.imageName
        )
      }
      return {}
    },
    snowHeight() {
      return this.$store.getters
        .snowHeight(this.cameraID, this.stickID, this.imageName)
        .toFixed(0)
    },
    flagImageApprovedByUser() {
      return this.$store.getters.flagImageApprovedByUser(
        this.cameraID,
        this.imageName
      )
    },
    flagImageDiscardedByUser() {
      return this.$store.getters.flagImageDiscardedByUser(
        this.cameraID,
        this.imageName
      )
    },
    showImageDialog() {
      return this.$store.getters.showImageDialog
    }
  },
  watch: {
    imageName() {
      this.addStick = this.sticksNotVisible[0]
        ? this.sticksNotVisible[0]
        : { id: 0, name: '' }
      this.removeStick = this.stickID
        ? {
            id: this.stickID,
            name: this.stickViewLabel
          }
        : { id: 0, name: '' }
    },
    showImageDialog() {
      this.addStick = this.sticksNotVisible[0]
        ? this.sticksNotVisible[0]
        : { id: 0, name: '' }
      this.removeStick = this.stickID
        ? {
            id: this.stickID,
            name: this.stickViewLabel
          }
        : { id: 0, name: '' }
    }
  },
  methods: {
    close() {
      this.$store.dispatch('setShowImageDialog', false)
    },
    onToggleShowSticks() {
      this.showSticks = !this.showSticks
    },
    onToggleShowLabels() {
      this.showLabels = !this.showLabels
    },
    onToggleShowMarkers() {
      this.showMarkers = !this.showMarkers
    },
    onRevertChangeToSticks() {
      this.$emit('revertChangeToSticks')
      this.$store.dispatch('checkForPendingChanges')
    },
    onSelectNewStick(payload) {
      this.selectLabel = payload
    },
    onAddStick() {
      // Show selected stick.
      this.$store.dispatch('setFlagStickVisible', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        stickID: this.addStick.id,
        flagState: true
      })

      // Update stick selector drop-downs.
      this.addStick = this.sticksNotVisible[0]
        ? this.sticksNotVisible[0]
        : { id: 0, name: '' }

      if (this.sticksVisible.includes(this.stickID)) {
        this.removeStick = {
          id: this.stickID,
          name: this.stickViewLabel
        }
      } else if (this.sticksVisible[0]) {
        this.removeStick = this.sticksVisible[0]
      } else {
        this.removeStick = { id: 0, name: '' }
      }

      // Update stick selector drop-downs.
      this.$store.dispatch('setFlagImageApprovedByUser', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        flagState: true
      })
    },
    onRemoveStick() {
      // Hide selected stick.
      this.$store.dispatch('setFlagStickVisible', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        stickID: this.removeStick.id,
        flagState: false
      })

      // Update stick selector drop-downs.
      this.addStick = this.sticksNotVisible[0]
        ? this.sticksNotVisible[0]
        : { id: 0, name: '' }

      if (this.sticksVisible.includes(this.stickID)) {
        this.removeStick = {
          id: this.stickID,
          name: this.stickViewLabel
        }
      } else if (this.sticksVisible[0]) {
        this.removeStick = this.sticksVisible[0]
      } else {
        this.removeStick = { id: 0, name: '' }
      }

      // Mark this image as approved by user.
      this.$store.dispatch('setFlagImageApprovedByUser', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        flagState: true
      })
    },
    discardImage() {
      this.$store.dispatch('setFlagImageDiscardedByUser', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        flagState: true
      })
    },
    undiscardImage() {
      this.$store.dispatch('setFlagImageDiscardedByUser', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        flagState: false
      })
    },
    approveImage() {
      this.$store.dispatch('setFlagImageApprovedByUser', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        flagState: true
      })
    },
    unapproveImage() {
      this.$store.dispatch('setFlagImageApprovedByUser', {
        cameraID: this.cameraID,
        imageName: this.imageName,
        flagState: false
      })
    }
  }
}
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.15s ease;
}

.dialog-container {
  width: 70%;
  margin: 20px auto;
  padding: 30px;
  background-color: var(--color-background);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;

  display: grid;
  grid-template-rows: 30px auto 150px;
  grid-template-columns: 5fr 1fr 2fr;
  grid-template-areas:
    '. . close-button'
    'image controls info'
    'gallery gallery gallery';
  gap: 5px;
}

.dialog-enter {
  opacity: 0;
}

.dialog-leave-active {
  opacity: 0;
}

.dialog-enter .dialog-container,
.dialog-leave-active .dialog-container {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.image-detail {
  grid-area: image;
}

.close-button {
  grid-area: close-button;
  align-self: top;
  justify-self: right;
}

.controls {
  grid-area: controls;
}

.show-hide-controls {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 30px auto;
  column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 5px;
}

.show-hide-controls * {
  align-self: center;
}

.editing-controls {
  margin-top: 5px;
  margin-bottom: 5px;

  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-columns: auto 30px;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-areas:
    'add-title add-title'
    'add-dropdown add-button'
    'remove-title remove-title'
    'remove-dropdown remove-button'
    'undo-text undo-button'
    'time-shift-title time-shift-title'
    'time-shift time-shift';
}

.editing-controls * {
  align-self: center;
}

.image-controls {
  margin-top: 5px;
  margin-bottom: 5px;

  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto 30px;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-areas:
    'approve-title approve-button'
    'discard-title discard-button';
}

.image-controls * {
  align-self: center;
}

.tooltip-icon svg {
  width: 15px;
  height: 12px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 180px;
  background-color: var(--color-tooltip-background);
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  left: 150%;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--color-tooltip-background) transparent
    transparent;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.info {
  grid-area: info;
}

.image-info {
  display: grid;
  grid-template-rows: auto auto auto auto;
  row-gap: 10px;
  grid-template-columns: auto auto;
  column-gap: 10px;
  margin-bottom: 5px;
  padding: 10px 0;
  background: white;
}

.image-info div:nth-child(even) {
  align-self: center;
  justify-self: left;
}

.image-info div:nth-child(odd) {
  align-self: center;
  justify-self: right;
  font-weight: bold;
}

.stick-info {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 10px;
  margin-top: 5px;
  padding: 10px 0;
  background: white;
}

.stick-info div:nth-child(even) {
  align-self: center;
  justify-self: left;
}

.stick-info div:nth-child(odd) {
  align-self: center;
  justify-self: right;
  font-weight: bold;
}

.gallery {
  grid-area: gallery;
}
</style>
