<template>
  <transition-group
    name="fade"
    tag="div"
    class="minimizedSplitscreens ui-element"
  >
    <UIBoxHeader
      v-for="splitscreen in splitscreens"
      :key="splitscreen.id"
      :icon="splitscreen.icon"
      :title="splitscreen.title"
      :closeCallback="close(splitscreen)"
      :expandCallback="expand(splitscreen)"
      :collapsed="true"
      class="mt-2"
    />
  </transition-group>
</template>

<style lang="sass" scoped>
.minimizedSplitscreens
  position: absolute
  bottom: $small-offset
  right: $small-offset
</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@intevation.de>
 */

import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("application", ["splitscreens"])
  },
  methods: {
    close(splitscreen) {
      return () => {
        if (splitscreen.closeCallback) splitscreen.closeCallback();
        this.$store.commit("application/removeSplitscreen", splitscreen.id);
      };
    },
    expand(splitscreen) {
      return () => {
        if (splitscreen.expandCallback) splitscreen.expandCallback();
        this.$store.commit("application/activeSplitscreenId", splitscreen.id);
        this.$store.commit("application/showSplitscreen", true);
      };
    }
  }
};
</script>