<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
                :additionalSurveys="additionalSurveys"
                :minAlt="minAlt"
                maxAlt="maxAlt"
                :selectedWaterLevel="selectedWaterLevel"
                :fairwayCoordinates="fairwayCoordinates"
                :waterLevels="waterLevels"
                :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>
/*
 * This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 * 
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 * 
 * Copyright (C) 2018 by via donau 
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 * 
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */

import Maplayer from "../map/Maplayer";
import FairwayProfile from "../fairway/Fairwayprofile";
import { mapGetters, mapState } from "vuex";
import debounce from "debounce";

export default {
  name: "mainview",
  components: {
    Maplayer,
    FairwayProfile
  },
  data() {
    return {
      width: null,
      height: null,
      margin: {
        top: 20,
        right: 40,
        bottom: 30,
        left: 40
      }
    };
  },
  computed: {
    ...mapGetters("application", ["isSplitscreen", "drawMode"]),
    ...mapState("fairwayprofile", [
      "currentProfile",
      "minAlt",
      "maxAlt",
      "totalLength",
      "waterLevels",
      "fairwayCoordinates",
      "selectedWaterLevel",
      "availableSurveys"
    ]),
    ...mapState("fairwayprofile", ["selectedMorph"]),
    additionalSurveys() {
      if (!this.availableSurveys) return [];
      return this.availableSurveys.surveys.filter(x => {
        return x.date_info !== this.selectedMorph.date_info;
      });
    },
    xAxis() {
      return [this.xScale.x, this.xScale.y];
    },
    yAxisLeft() {
      const hi = Math.max(this.maxAlt, this.selectedWaterLevel);
      return [this.yScaleLeft.lo, hi];
    },
    yAxisRight() {
      return [-this.maxAlt, 0];
    },
    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);
    window.addEventListener("onbeforeprint", this.test);
  },
  updated() {
    this.scaleFairwayProfile();
  },
  destroyed() {
    window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
  },
  methods: {
    test(evt) {
      console.log("test: ", evt);
    },
    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 - 220;
    }
  }
};
</script>