<template>
  <div class="header-container" :style="cssVars">
    <div class="top-bar">
      <h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK - IEEE VIS 2021 Submission Version</h1>
      <help-circle-icon
        v-if="!showHelpDialog"
        class="icon"
        @click="showHelpDialog = true"
      />
      <help-circle-outline-icon
        class="icon"
        v-else
        @click="showHelpDialog = false"
      />
      <div class="popup-container">
        <filter-icon
          class="icon"
          v-if="!showFilters"
          @click="showFilters = true"
        />
        <filter-off-icon class="icon" v-else @click="showFilters = false" />
        <Filters class="popup" v-show="showFilters" />
      </div>
      <div class="popup-container">
        <map-legend-icon class="icon" @click="showLegend = !showLegend" />
        <Legend class="popup" v-if="showLegend" />
      </div>
      <content-save-icon
        class="icon"
        @click="commitChangesToDisk"
        :class="{ iconDisabled: !hasUncommitedChanges }"
      />
    </div>
    <div class="charts">
      <p v-if="!areDataAvailable">
        <b>Please wait</b>, connecting to the server. This may take up to 30 seconds.<br>
        If the page does not change within that time, then try to reload the page.<br><br> 
        Explanation: The server may be waking up from a hibernation, which is entered automatically after 30 minutes without activity.
      </p>
      <div
        v-for="cameraID in cameraIDs"
        :key="cameraID"
        class="averages-container card"
      >
        <div class="button-show">
          <chevron-right-icon
            class="icon"
            v-if="statusGUI[cameraID] === 'minimized'"
            @click="statusGUI = { statusGUI: 'full', cameraID }"
          />
          <chevron-down-icon
            class="icon"
            v-if="statusGUI[cameraID] !== 'minimized'"
            @click="statusGUI = { statusGUI: 'minimized', cameraID }"
          />
        </div>
        <div class="label">
          <camera-icon />
          <div>{{ cameraID }}</div>
        </div>
        <AveragesMap
          :cameraID="cameraID"
          class="card"
          v-show="statusGUI[cameraID] === 'full'"
        />
      </div>
      <div class="card context-container" v-show="activeStick !== null">
        <div class="label" style="grid-column: 2/3">
          <sign-pole-icon />
          <div>{{ stickViewLabel }}</div>
        </div>
        <ContextMap v-if="activeStick" class="context-map" />
      </div>
    </div>
  </div>
</template>

<script>
import ContextMap from '@/components/header/ContextMap.vue'
import AveragesMap from '@/components/header/AveragesMap.vue'
import Filters from '@/components/header/Filters.vue'
import Legend from '@/components/header/Legend.vue'

import ContentSaveIcon from 'icons/ContentSave'
import FilterIcon from 'icons/Filter'
import FilterOffIcon from 'icons/FilterOff'
import MapLegendIcon from 'icons/MapLegend'
import HelpCircleIcon from 'icons/HelpCircle'
import HelpCircleOutlineIcon from 'icons/HelpCircleOutline'
import ChevronDownIcon from 'icons/ChevronDown'
import ChevronRightIcon from 'icons/ChevronRight'
import CameraIcon from 'icons/Camera'
import SignPoleIcon from 'icons/SignPole'

export default {
  name: 'Header',
  components: {
    ContextMap,
    AveragesMap,
    Filters,
    Legend,

    ContentSaveIcon,
    FilterIcon,
    FilterOffIcon,
    MapLegendIcon,
    HelpCircleIcon,
    HelpCircleOutlineIcon,
    ChevronDownIcon,
    ChevronRightIcon,
    CameraIcon,
    SignPoleIcon
  },
  computed: {
    // --- SCSS variables ---
    cssVars() {
      return {
        '--camera-count': this.cameraIDs.length
      }
    },
    // ---

    areDataAvailable() {
      return this.$store.getters.stickIDs.length > 0
    },

    pendingPostRequestsCount() {
      return this.$store.getters.pendingPostRequestsCount
    },
    hasUncommitedChanges() {
      return this.$store.getters.hasUncommitedChanges
    },
    showFilters: {
      get() {
        return this.$store.getters.showFilters
      },
      set(value) {
        this.$store.dispatch('setShowFilters', value)
      }
    },
    showLegend: {
      get() {
        return this.$store.getters.showLegend
      },
      set(value) {
        this.$store.dispatch('setShowLegend', value)
      }
    },
    showHelpDialog: {
      get() {
        return this.$store.getters.showHelpDialog
      },
      set(value) {
        this.$store.dispatch('setShowHelpDialog', value)
      }
    },
    cameraIDs() {
      return this.$store.getters.cameraIDs
    },
    activeStick() {
      return this.$store.getters.activeStick
    },
    activeCamera() {
      return this.$store.getters.activeCamera
    },
    stickViewLabel() {
      return this.$store.getters.stickViewLabel(
        this.activeStick,
        this.activeCamera
      )
    },
    statusGUI: {
      get() {
        let result = {}
        for (const ID of this.cameraIDs) {
          result[ID] = this.$store.getters.cameraStatusGUI(ID)
        }
        return result
      },
      set(payload) {
        this.$store.dispatch('setCameraStatusGUI', {
          statusGUI: payload.statusGUI,
          cameraID: payload.cameraID
        })
      }
    }
  },
  methods: {
    commitChangesToDisk() {
      if (this.hasUncommitedChanges) {
        this.$store.dispatch('commitChangesToDisk')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;

  background-color: #ffffff;
  padding-bottom: 10px;
}

.top-bar {
  padding-left: 10px;
  display: grid;
  row-gap: 10px;
  grid-template-rows: 50px;
  grid-template-columns: auto 50px 50px 50px 50px 20px;
}

.popup-container {
  position: relative;
  margin: auto;
}

.popup-container .popup {
  position: absolute;
  z-index: 20;
  top: 40px;
  right: -10px;
}

.charts {
  padding-left: 10px;
  display: grid;
  row-gap: 10px;
  grid-template-rows: repeat(var(--camera-count), auto) auto;
  grid-template-columns: auto 150px;
}

.averages-container {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 30px 100px auto 150px;
}

.context-container {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 30px 100px auto 150px;
}

.icon {
  justify-self: center;
  align-self: center;
}

.label {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 30px auto;
}

.label * {
  align-self: center;
  justify-self: center;
  font-weight: bold;
}
</style>
