<template>
  <div :class="style">
    <Bottlenecks
      style="min-width: 650px"
      v-if="contextBoxContent === 'bottlenecks'"
    />
    <keep-alive>
      <Staging
        style="min-width: 850px"
        v-if="contextBoxContent === 'staging'"
      />
      <Stretches
        style="min-width: 850px"
        v-if="contextBoxContent === 'stretches'"
      />
      <Sections
        style="min-width: 850px"
        v-if="contextBoxContent === 'sections'"
      />
      <ImportConfiguration
        style="min-width: 850px"
        v-if="contextBoxContent === 'importconfiguration'"
      />
    </keep-alive>
    <ImportOverview
      style="min-width: 850px"
      v-if="contextBoxContent === 'importoverview'"
    />
  </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("@/components/Bottlenecks"),
    Stretches: () => import("@/components/stretches/Stretches"),
    Sections: () => import("@/components/sections/Sections"),
    ImportOverview: () => import("@/components/importoverview/ImportOverview"),
    ImportConfiguration: () => import("@/components/importconfiguration/Import")
  },
  computed: {
    ...mapState("application", [
      "showSearchbarLastState",
      "contextBoxContent",
      "showContextBox"
    ]),
    style() {
      return [
        "ui-element shadow-xs contextbox",
        {
          contextboxcollapsed: !this.showContextBox,
          contextboxextended:
            this.showContextBox && this.contextBoxContent !== "bottlenecks",
          contextboxbottlenecks:
            this.showContextBox && this.contextBoxContent === "bottlenecks",
          "rounded-bottom": this.contextBoxContent !== "imports",
          rounded: this.contextBoxContent === "imports"
        }
      ];
    }
  },
  methods: {
    close() {
      this.$store.commit("map/mapPopupEnabled", true);
      this.$store.commit("application/searchQuery", "");
      this.$store.commit("application/showContextBox", false);
      this.$store.commit("map/reviewActive", false);
      this.$store.commit(
        "application/showSearchbar",
        this.showSearchbarLastState
      );
      this.$router.push("/");
    }
  }
};
</script>

<style scoped>
.contextbox {
  position: relative;
  background-color: #ffffff;
  opacity: var(--slight-transparent);
  transition: max-width 0.3s, max-height 0.3s;
  overflow: hidden;
  background: #fff;
}

.contextboxcollapsed {
  max-width: 0;
  max-height: 0;
}

.contextboxextended {
  max-width: 858px;
  transition: 0.1s;
  transition-timing-function: ease;
}

.contextboxbottlenecks {
  max-width: 650px;
  transition: 0.1s;
  transition-timing-function: ease;
}

.close-contextbox {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 7px;
  height: var(--icon-width);
  width: var(--icon-height);
}
</style>