<template>
  <div class="main d-flex flex-column">
    <Maplayer :split="showSplitscreen"></Maplayer>
    <FairwayProfile
      :additionalSurveys="additionalSurveys"
      :xScale="xAxis"
      :yScaleLeft="yAxisLeft"
      :yScaleRight="yAxisRight"
      :margin="margins"
    ></FairwayProfile>
  </div>
</template>

<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 "./Maplayer";
import FairwayProfile from "./fairway/Fairwayprofile";
import { mapState } from "vuex";

export default {
  name: "mainview",
  components: {
    Maplayer,
    FairwayProfile
  },
  data() {
    return {
      width: null,
      height: null,
      margin: {
        top: 20,
        right: 40,
        bottom: 30,
        left: 40
      }
    };
  },
  computed: {
    ...mapState("application", ["showSplitscreen"]),
    ...mapState("fairwayprofile", [
      "currentProfile",
      "minAlt",
      "maxAlt",
      "totalLength",
      "waterLevels",
      "fairwayCoordinates",
      "selectedWaterLevel"
    ]),
    ...mapState("bottlenecks", ["surveys", "selectedSurvey"]),
    additionalSurveys() {
      if (!this.surveys) return [];
      if (!this.selectedSurvey) return this.surveys;
      return this.surveys.filter(survey => {
        return survey.date_info !== this.selectedSurvey.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() {
      const DELTA = this.maxAlt * 1.1 - this.maxAlt;
      return [this.maxAlt * 1 + DELTA, -DELTA];
    },
    margins() {
      return this.margin;
    },
    yScaleLeft() {
      return {
        lo: this.minAlt,
        hi: this.maxAlt
      };
    },
    xScale() {
      return {
        x: 0,
        y: this.totalLength
      };
    }
  }
};
</script>