<template>
  <div>
    <span
      :class="[
        'kind',
        {
          'text-danger': /error/.test(line.kind),
          'text-warning': /warn/.test(line.kind),
          'font-weight-bold': /warn|error/.test(line.kind)
        }
      ]"
      >{{ line.kind.toUpperCase() }}
    </span>
    <span
      :class="[
        'time',
        {
          'text-danger': /error/.test(line.kind),
          'text-warning': /warn/.test(line.kind),
          'font-weight-bold': /warn|error/.test(line.kind)
        }
      ]"
      >{{ line.time | dateTime }}
    </span>
    <span
      :class="[
        'message',
        {
          'text-danger': /error/.test(line.kind),
          'text-warning': /warn/.test(line.kind),
          'font-weight-bold': /warn|error/.test(line.kind)
        }
      ]"
      ><template v-for="part in line_message">
        <template
          v-if="/\w+_Bottleneck_?\d+/.test(part) && bottlenecksLookup[part]"
        >
          <a @click="showBottleneck(part)" href="#" :key="part">{{ part }}</a>
        </template>
        <template v-else>
          {{ part }}
        </template>
      </template>
    </span>
  </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):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapGetters } from "vuex";

export default {
  name: "Item",
  props: ["height", "line", "index"],
  computed: {
    ...mapGetters("bottlenecks", ["bottlenecksForDisplay"]),
    bottlenecksLookup: {
      get() {
        return this.bottlenecksForDisplay.reduce((o, bn) => {
          o[bn.properties.bottleneck_id] = bn;
          return o;
        }, {});
      }
    },
    line_message: {
      get() {
        const search = /(\w+_Bottleneck_?\d+)/g;
        return this.line.message.replace(search, "||$1||").split("||");
      }
    }
  },
  methods: {
    showBottleneck(bottleneck_id) {
      const bottleneck = this.bottlenecksLookup[bottleneck_id];
      this.$store
        .dispatch(
          "bottlenecks/setSelectedBottleneck",
          bottleneck.properties.bottleneck_id
        )
        .then(() => {
          this.$store.dispatch("map/moveToFeauture", {
            feature: bottleneck,
            zoom: 16,
            preventZoomOut: true
          });
        });
      this.$store.commit(
        "bottlenecks/setBottleneckForPrint",
        bottleneck.properties.name
      );
    }
  }
};
</script>

<style scoped>
.kind {
  width: 9%;
}

.time {
  width: 26%;
}

.message {
  width: 65%;
  word-wrap: break-word;
}
</style>