<template>
    <div :class="style">
        <div @click="close" class="ui-element close-contextbox text-muted">
            <i class="fa fa-close"></i>
        </div>
        <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks>
        <Importsounding v-if="showInContextBox === 'imports'"></Importsounding>
        <Staging v-if="showInContextBox === 'staging'"></Staging>
    </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):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapState } from "vuex";

export default {
  name: "contextbox",
  components: {
    Bottlenecks: () => import("./Bottlenecks"),
    Importsounding: () => import("./Import_soundingresults.vue"),
    Staging: () => import("./Staging.vue")
  },
  computed: {
    ...mapState("application", ["showSearchbarLastState", "showInContextBox"]),
    style() {
      return [
        "ui-element shadow-xs contextbox ml-3",
        {
          contextboxcollapsed: !this.showInContextBox,
          contextboxextended: this.showInContextBox,
          "rounded-bottom": this.showInContextBox !== "imports",
          rounded: this.showInContextBox === "imports"
        }
      ];
    }
  },
  methods: {
    close() {
      this.$store.commit("application/showInContextBox", null);
      this.$store.commit(
        "application/showSearchbar",
        this.showSearchbarLastState
      );
    }
  }
};
</script>

<style lang="sass" scoped>
.contextbox
  position: relative
  background-color: #ffffff
  opacity: $slight-transparent
  transition: left 0.3s ease
  overflow: hidden
  background: #fff

.contextboxcollapsed
  width: 0
  height: 0
  transition: $transition-fast

.contextboxextended
  min-width: 600px

.close-contextbox
  position: absolute
  z-index: 2
  right: 0
  top: 7px
  height: $icon-width
  width: $icon-height
  display: none

.contextboxextended .close-contextbox
  display: block
</style>