<template>
  <div class="stick" :class="{ active: active }">
    <div
      class="buttons-container"
      :class="{ minimized: statusGUI === 'minimized' }"
      :style="sizeButtonsStyle"
    >
      <div class="button-show">
        <chevron-right-icon
          class="icon"
          v-if="statusGUI === 'minimized'"
          @click="statusGUI = 'compact'"
        />
        <chevron-down-icon
          class="icon"
          v-if="statusGUI !== 'minimized'"
          @click="statusGUI = 'minimized'"
        />
      </div>
      <div class="button-expand">
        <chevron-double-down-icon
          class="icon"
          v-if="statusGUI === 'compact' && cameraIDs.length > 1"
          @click="statusGUI = 'full'"
        />
        <chevron-double-up-icon
          class="icon"
          v-if="statusGUI === 'full'"
          @click="statusGUI = 'compact'"
        />
      </div>
    </div>
    <StickView
      :stickID="stickID"
      v-for="cameraID in cameraIDs"
      :key="cameraID"
      :cameraID="cameraID"
      v-show="
        statusGUI !== 'minimized' &&
          (cameraID === primaryCamera || statusGUI === 'full')
      "
    />
    <div
      v-if="statusGUI === 'minimized'"
      class="card"
      style="width:90px; font-weight:bold"
    >
      {{ stickViewLabel }}
    </div>
  </div>
</template>

<script>
import StickView from '@/components/StickView.vue'
import ChevronDownIcon from 'icons/ChevronDown'
import ChevronRightIcon from 'icons/ChevronRight'
import ChevronDoubleDownIcon from 'icons/ChevronDoubleDown'
import ChevronDoubleUpIcon from 'icons/ChevronDoubleUp'
export default {
  // Component Stick
  // Holds one or more StickViews. When active, shows all StickViews, otherwise only the primary.
  name: 'Stick',
  props: {
    stickID: {
      type: String,
      required: true
    }
  },
  components: {
    StickView,
    ChevronDownIcon,
    ChevronRightIcon,
    ChevronDoubleDownIcon,
    ChevronDoubleUpIcon
  },
  computed: {
    active() {
      return this.$store.getters.activeStick === this.stickID
    },
    cameraIDs() {
      return this.$store.getters.cameraByStick(this.stickID)
    },
    stickViewLabel() {
      return this.$store.getters.stickViewLabel(this.stickID, this.cameraIDs[0])
    },
    sizeButtonsStyle() {
      // How many rows does the button container span.
      const size = this.statusGUI === 'full' ? this.cameraIDs.length + 1 : 2
      return 'grid-row: 1/' + size + ';'
    },
    primaryCamera() {
      return this.$store.getters.primaryCamera(this.stickID)
    },
    statusGUI: {
      get() {
        return this.$store.getters.stickStatusGUI(this.stickID)
      },
      set(value) {
        this.$store.dispatch('setStickStatusGUI', {
          statusGUI: value,
          stickID: this.stickID
        })
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.stick {
  display: grid;
  grid-template-columns: 30px auto;
  row-gap: 5px;
  border: 5px solid var(--color-accent-1);
  border-radius: 10px;
  background-color: var(--color-accent-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}
.stick.active {
  background-color: var(--color-accent-2);
  border: 5px solid var(--color-accent-2);
}

.buttons-container {
  display: grid;
  grid-template-rows: 30px auto 30px;
}

.buttons-container.minimized {
  display: grid;
  grid-template-rows: 30px auto;
}

.button-expand {
  grid-row: -2/-1;
}

.icon {
  justify-self: center;
  align-self: center;
}
</style>
