<template>
  <div class="ml-1">
    <div
      :class="
        'rounded-top toolbar toolbar-' +
          (expandToolbar ? 'expanded' : 'collapsed')
      "
    >
      <Identify />
      <Layers />
      <Profiles />
      <Gauges />
      <AvailableFairwayDepth />
      <Linetool />
      <Polygontool />
      <Pdftool />
    </div>
    <div
      @click="$store.commit('application/expandToolbar', !expandToolbar)"
      class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"
    >
      <font-awesome-icon
        class="pointer"
        :icon="expandToolbar ? 'angle-up' : 'angle-down'"
      />
    </div>
  </div>
</template>

<style lang="scss">
// not scoped to affect nested components
// doen't work when put in application/assets/application.sass... why??? o_O
.toolbar {
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: max-height 0.4s;
  margin-bottom: auto;
  cursor: pointer;
}

.toolbar-collapsed {
  max-height: 4rem;
}

.toolbar-expanded {
  max-height: 100%;
}

.toolbar-button {
  opacity: 0.96;
  color: #666;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  z-index: 2;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  &.disabled {
    color: #ccc;
    cursor: default;
  }
}

.toolbar-button:last-child {
  border-bottom: none;
}

.toolbar-button .inverted {
  color: #17a2b8;
}

.toolbar-button .grey {
  color: #ddd;
}

.toolbar-button .indicator {
  color: #fff;
  background: #17a2b8;
  position: absolute;
  bottom: -14px;
  left: -14px;
  padding: 2px 4px 1px;
  font-size: 11px;
  line-height: 11px;
  border-top-right-radius: 0.25rem;
  transition: bottom 0.3s, left 0.3s;
}

.toolbar-button .indicator.show {
  left: 0;
  bottom: 0;
}

.toolbar-toggle {
  height: 1.2rem;
  border-bottom: none;
}
</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 } from "vuex";

export default {
  name: "toolbar",
  components: {
    Identify: () => import("./Identify"),
    Layers: () => import("./Layers"),
    Linetool: () => import("./Linetool"),
    Polygontool: () => import("./Polygontool"),
    Profiles: () => import("./Profiles"),
    Gauges: () => import("./Gauges"),
    Pdftool: () => import("./Pdftool"),
    AvailableFairwayDepth: () => import("./AvailableFairwayDepth")
  },
  computed: {
    ...mapState("application", ["expandToolbar"])
  }
};
</script>