<template>
  <div class="stick-view" :style="cssVars">
    <div class="label card">
      <sign-pole-icon />
      <div>{{ label }}</div>
      <camera-icon />
      <div>{{ cameraID }}</div>
    </div>
    <StickChart
      :chartID="chartID"
      :stickID="stickID"
      :cameraID="cameraID"
      :height="chartHeight"
    />
    <img
      v-if="imagePath"
      :src="imagePath"
      class="stick-view-image"
      @click="onImageClick"
    />
    <div class="card" v-else>
      <svg viewBox="0 0 400 300">
        <rect x="0" y="11" width="30" height="30" class="bar-manually-edited" />
        <text x="40" y="40" class="chart-text">
          Manually edited: {{ statsManuallyEdited }}
        </text>
        <rect x="0" y="51" width="30" height="30" class="bar-discarded" />
        <text x="40" y="80" class="chart-text">
          Discarded: {{ statsDiscarded }}
        </text>
        <rect x="0" y="91" width="30" height="30" class="bar-normal" />
        <text x="40" y="120" class="chart-text">Normal: {{ statsNormal }}</text>
        <rect x="0" y="131" width="30" height="30" class="bar-not-found" />
        <text x="40" y="160" class="chart-text">
          Not found: {{ statsNotFound }}
        </text>
        <rect x="0" y="171" width="30" height="30" class="bar-no-snow" />
        <text x="40" y="200" class="chart-text">
          No snow: {{ statsNoSnow }}
        </text>

        <rect
          :x="barChart.barManuallyEdited.x"
          y="220"
          :width="barChart.barManuallyEdited.width"
          height="60"
          class="bar-manually-edited"
        />
        <rect
          :x="barChart.barDiscarded.x"
          y="220"
          :width="barChart.barDiscarded.width"
          height="60"
          class="bar-discarded"
        />
        <rect
          :x="barChart.barNormal.x"
          y="220"
          :width="barChart.barNormal.width"
          height="60"
          class="bar-normal"
        />
        <rect
          :x="barChart.barNotFound.x"
          y="220"
          :width="barChart.barNotFound.width"
          height="60"
          class="bar-not-found"
        />
        <rect
          :x="barChart.barNoSnow.x"
          y="220"
          :width="barChart.barNoSnow.width"
          height="60"
          class="bar-no-snow"
        />
      </svg>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import StickChart from '@/components/StickChart.vue'
import CameraIcon from 'icons/Camera'
import SignPoleIcon from 'icons/SignPole'

export default {
  // Component StickView
  // Draws graphs and shows stick description and images.
  name: 'StickView',
  props: {
    cameraID: {
      type: String,
      required: true
    },
    stickID: {
      type: String,
      required: true
    }
  },
  components: {
    StickChart,
    CameraIcon,
    SignPoleIcon
  },
  data() {
    return {
      chartWidth: 0,
      chartHeight: 100
    }
  },
  computed: {
    // --- ID ---
    chartID() {
      return 'Chart_' + this.stickID + '_' + this.cameraID
    },
    // ---

    // --- SCSS variables ---
    cssVars() {
      return {
        '--chart-height': this.chartHeight + 'px'
      }
    },
    // ---

    // --- Vuex store data ---
    primary() {
      return this.$store.getters.primaryCamera(this.stickID) === this.cameraID
    },
    label() {
      return this.$store.getters.stickViewLabel(this.stickID, this.cameraID)
    },
    active() {
      return this.$store.getters.activeStick === this.stickID
    },
    activeCamera() {
      return this.$store.getters.activeCamera
    },
    imagePath() {
      if (this.$store.getters.activeStick != this.stickID) return null
      var imageName = this.$store.getters.activeImageName(this.cameraID)
      if (imageName) {
        return this.$store.getters.imageURL(this.cameraID, imageName)
      }
      return null
    },
    // ---

    // --- Stick statistics ---
    statsManuallyEdited() {
      return this.$store.getters.statsManuallyEdited(
        this.cameraID,
        this.stickID
      )
    },
    statsDiscarded() {
      return this.$store.getters.statsDiscarded(this.cameraID, this.stickID)
    },
    statsNotFound() {
      return this.$store.getters.statsNotFound(this.cameraID, this.stickID)
    },
    statsNoSnow() {
      return this.$store.getters.statsNoSnow(this.cameraID, this.stickID)
    },
    statsNormal() {
      return (
        this.$store.getters.statsAllPoints(this.cameraID) -
        this.statsManuallyEdited -
        this.statsDiscarded -
        this.statsNotFound -
        this.statsNoSnow
      )
    },
    statsAll() {
      return (
        this.statsManuallyEdited +
        this.statsDiscarded +
        this.statsNotFound +
        this.statsNoSnow +
        this.statsNormal
      )
    },
    // ---

    // --- Stats chart bars ---
    barChart() {
      const scale = d3
        .scaleLinear()
        .domain([0, this.statsAll])
        .range([0, 400])

      let result = {
        barManuallyEdited: {
          x: 0,
          width: scale(this.statsManuallyEdited)
        },
        barDiscarded: {
          x: scale(this.statsManuallyEdited) + 0,
          width: scale(this.statsDiscarded)
        },
        barNormal: {
          x: scale(this.statsDiscarded) + scale(this.statsManuallyEdited),
          width: scale(this.statsNormal)
        },
        barNotFound: {
          x:
            scale(this.statsNormal) +
            scale(this.statsDiscarded) +
            scale(this.statsManuallyEdited),
          width: scale(this.statsNotFound)
        },
        barNoSnow: {
          x:
            scale(this.statsNotFound) +
            scale(this.statsNormal) +
            scale(this.statsDiscarded) +
            scale(this.statsManuallyEdited),
          width: scale(this.statsNoSnow)
        }
      }

      return result
    }
    //
  },
  methods: {
    onImageClick() {
      if (this.activeCamera !== this.cameraID) {
        const imageName = this.$store.getters.activeImageName(this.cameraID)
        this.$store.dispatch('setActivePoint', {
          stickID: this.stickID,
          cameraID: this.cameraID,
          imageName
        })
      }
      this.$store.dispatch('setShowImageDialog', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.stick-view {
  display: grid;
  grid-template-columns: 100px auto calc(var(--chart-height) * 4 / 3);
  grid-template-rows: var(--chart-height);
  gap: 5px;
}

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

.label * {
  align-self: center;
  justify-self: center;
  font-weight: bold;
}

.stick-view-image {
  border-radius: 5px;
  height: var(--chart-height);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.chart-container {
  background: var(--color-label-background);
}

.bar-manually-edited {
  fill: var(--color-manually-edited);
}

.bar-discarded {
  fill: var(--color-discarded);
}

.bar-normal {
  fill: var(--color-normal);
}

.bar-not-found {
  fill: var(--color-not-found);
}

.bar-no-snow {
  fill: var(--color-no-snow);
}

.chart-text {
  // font: normal 35px sans-serif;
  font-size: 35px;
}
</style>
