<template>
    <div :class="bottlenecksStyle">
        <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks">
            <i class="fa fa-close"></i>
        </div>

        <div v-if="!this.bottlenecksCollapsed">
            <h4>Bottlenecks</h4>
            <hr class="mb-0">
            <div style="max-height: 500px; overflow-y: scroll">
                <table class="table text-left mb-0" style="margin-top: -1px;">
                    <tr v-for="(bottleneck) in bottlenecks"
                        :key="bottleneck.name">
                        <td>
                            <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)">
                                {{ bottleneck.name }}
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </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";
import { fromLonLat } from "ol/proj";

export default {
  name: "bottlenecks",
  computed: {
    ...mapState("application", ["bottlenecksCollapsed"]),
    ...mapState("bottlenecks", ["bottlenecks"]),
    ...mapState("mapstore", ["openLayersMap"]),
    bottlenecksStyle() {
      return {
        "ui-element": true,
        bottlenecks: true,
        overlay: true,
        bottleneckscollapsed: this.bottlenecksCollapsed,
        bottlenecksextended: !this.bottlenecksCollapsed,
        shadow: true
      };
    }
  },
  methods: {
    // TODO: make this central, duplicates code from application/Topbar.vue
    moveToBottleneck(bottleneck) {
      if (bottleneck.geom.type == "Point") {
        let view = this.openLayersMap.getView();
        const currentZoom = view.getZoom();
        const newZoom = Math.max(17, currentZoom);
        view.animate(
          {
            zoom: newZoom,
            center: fromLonLat(
              bottleneck.geom.coordinates,
              view.getProjection()
            )
          },
          700
        );
      }
      this.$store.commit("application/toggleBottlenecks");
    }
  },
  mounted() {
    this.$store.dispatch("bottlenecks/loadBottlenecks");
  }
};
</script>

<style lang="scss">
.bottlenecks {
  position: absolute;
  z-index: -2;
  top: $offset;
  left: 64px;
  background-color: #ffffff;
  padding-top: $offset;
  opacity: $slight-transparent;
  border-radius: $border-radius;
}

.bottleneckscollapsed {
  width: 0;
  height: 0;
  transition: $transition-fast;
}

.bottlenecksextended {
  min-height: $sidebar-height;
  width: 500px;
}

.close-bottlenecks {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 7px;
  border-radius: $border-radius;
  height: $icon-width;
  width: $icon-height;
  display: none;
}

.bottlenecksextended .close-bottlenecks {
  display: block;
}
</style>