<template>
  <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
    <Pane :pane="panes[0]" :key="panes[0].id" :class="paneClasses[0]" />
    <Pane
      :pane="panes[1]"
      :key="panes[1].id"
      :class="paneClasses[1]"
      v-if="panes.length >= 2"
    />
    <Pane
      :pane="panes[2]"
      :key="panes[2].id"
      :class="paneClasses[2]"
      v-if="panes.length >= 3"
    />
    <Pane
      :pane="panes[3]"
      :key="panes[3].id"
      :class="paneClasses[3]"
      v-if="panes.length === 4"
    />
  </div>
</template>

<style>
#panes {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
}
#panes.rotate1 {
  flex-wrap: wrap;
  flex-direction: row;
}
#panes.rotate2 {
  flex-wrap: wrap-reverse;
  flex-direction: column;
}
#panes.rotate3 {
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}
#panes.rotate4 {
  flex-wrap: wrap;
  flex-direction: column-reverse;
}
#panes .pane {
  border: solid 1px #dee2e6;
  background: #fff;
}
</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>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */

import { mapState } from "vuex";
import * as paneSetups from "./paneSetups";

export default {
  components: {
    Pane: () => import("./Pane")
  },
  computed: {
    ...mapState("application", ["paneSetup", "paneRotate"]),
    panes() {
      return Object.values(paneSetups[this.paneSetup]);
    },
    paneClasses() {
      if (this.paneSetup === "DEFAULT") {
        return ["wh-100"];
      }

      if (this.paneSetup === "COMPARESURVEYS") {
        return [2, 4].includes(this.paneRotate)
          ? ["w-100 h-50", "w-100 h-50"]
          : ["w-50 h-100", "w-50 h-100"];
      }

      if (this.paneSetup === "FAIRWAYPROFILE") {
        return [1, 3].includes(this.paneRotate)
          ? ["w-100 h-50", "w-100 h-50"]
          : ["w-50 h-100", "w-50 h-100"];
      }

      if (this.paneSetup === "AVAILABLEFAIRWAYDEPTH") {
        return [1, 3].includes(this.paneRotate)
          ? ["w-100 h-50", "w-100 h-50"]
          : ["w-50 h-100", "w-50 h-100"];
      }

      if (this.paneSetup === "AVAILABLEFAIRWAYDEPTHLNWL") {
        return [1, 3].includes(this.paneRotate)
          ? ["w-100 h-50", "w-100 h-50"]
          : ["w-50 h-100", "w-50 h-100"];
      }

      if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") {
        return [1, 3].includes(this.paneRotate)
          ? ["wh-50", "wh-50", "w-100 h-50"]
          : ["wh-50", "wh-50", "w-50 h-100"];
      }

      if (
        ["GAUGE_WATERLEVEL", "GAUGE_HYDROLOGICALCONDITIONS"].includes(
          this.paneSetup
        )
      ) {
        return [1, 3].includes(this.paneRotate)
          ? ["w-100 h-50", "w-100 h-50"]
          : ["w-50 h-100", "w-50 h-100"];
      }

      if (this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS") {
        return [1, 3].includes(this.paneRotate)
          ? ["w-100 h-50", "wh-50", "wh-50"]
          : ["h-100 w-50", "wh-50", "wh-50"];
      }
    }
  }
};
</script>