<template>
  <div>
    <div
      :class="[
        'splitscreen bg-white d-flex flex-column ui-element',
        { show: showSplitscreen }
      ]"
    >
      <UIBoxHeader
        :icon="activeSplitscreen.icon"
        :title="activeSplitscreen.title"
        :closeCallback="close"
        :collapseCallback="collapse"
        v-if="activeSplitscreen"
      />
      <div class="d-flex flex-fill">
        <transition name="fade">
          <div
            class="loading d-flex justify-content-center align-items-center"
            v-if="splitscreenLoading"
          >
            <font-awesome-icon icon="spinner" spin />
          </div>
        </transition>
        <component :is="activeSplitscreen.component" v-if="activeSplitscreen" />
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.splitscreen
  position: absolute
  bottom: -50vh
  left: 0
  right: 0
  height: 50vh
  overflow: hidden
  z-index: 1
  box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.075)
  transition: bottom 0.3s
  &.show
    bottom: 0

  .loading
    background: rgba(255, 255, 255, 0.96)
    position: absolute
    z-index: 99
    top: 34px
    right: 0
    bottom: 0
    left: 0
</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):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */

import { mapState, mapGetters } from "vuex";

export default {
  components: {
    Fairwayprofile: () => import("@/components/fairway/Fairwayprofile"),
    Waterlevel: () => import("@/components/gauge/Waterlevel")
  },
  computed: {
    ...mapState("application", ["showSplitscreen", "splitscreenLoading"]),
    ...mapGetters("application", ["activeSplitscreen"])
  },
  methods: {
    collapse() {
      if (this.activeSplitscreen.collapseCallback)
        this.activeSplitscreen.collapseCallback();
      this.$store.commit("application/showSplitscreen", false);
    },
    close() {
      this.$store.commit("application/showSplitscreen", false);
      setTimeout(() => {
        let removeId = this.activeSplitscreen.id;
        let callback = this.activeSplitscreen.closeCallback;
        this.$store.commit("application/activeSplitscreenId", null);
        if (callback) callback();
        this.$store.commit("application/removeSplitscreen", removeId);
      }, 350);
    }
  }
};
</script>