<template>
    <div class="main d-flex flex-column">
        <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
        <div v-if="isSplitscreen" class="profile d-flex flex-row">
            <FairwayProfile :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
        </div>
    </div>
</template>

<style lang="scss">
.profile {
  background-color: white;
  height: 50vh;
}
</style>

<script>
import Maplayer from "../map/Maplayer";
import FairwayProfile from "../fairway/Fairwayprofile";
import { mapGetters } from "vuex";
import debounce from "debounce";

export default {
  name: "mainview",
  components: {
    Maplayer,
    FairwayProfile
  },
  data() {
    return {
      width: null,
      height: null,
      yScaleRight: {
        lo: -6,
        hi: 1
      },
      margin: {
        top: 20,
        right: 40,
        bottom: 20,
        left: 40
      }
    };
  },
  computed: {
    ...mapGetters("application", ["isSplitscreen", "drawMode"]),
    ...mapGetters("fairwayprofile", [
      "currentProfile",
      "minAlt",
      "maxAlt",
      "totalLength",
      "waterLevels",
      "fairwayCoordinates"
    ]),
    xAxis() {
      return [this.xScale.x, this.xScale.y];
    },
    yAxisLeft() {
      return [this.yScaleLeft.lo, this.yScaleLeft.hi];
    },
    yAxisRight() {
      return [this.yScaleRight.lo, this.yScaleRight.hi];
    },
    margins() {
      return this.margin;
    },
    yScaleLeft() {
      return {
        lo: this.minAlt,
        hi: this.maxAlt
      };
    },
    xScale() {
      return {
        x: 0,
        y: this.totalLength
      };
    }
  },
  created() {
    window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
  },
  updated() {
    this.scaleFairwayProfile();
  },
  destroyed() {
    window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
  },
  methods: {
    scaleFairwayProfile() {
      if (!document.querySelector(".profile")) return;
      const clientHeight = document.querySelector(".profile").clientHeight;
      const clientWidth = document.querySelector(".profile").clientWidth;
      if (!clientHeight || !clientWidth) return;
      this.height = document.querySelector(".profile").clientHeight - 25;
      this.width = document.querySelector(".profile").clientWidth - 200;
    }
  }
};
</script>