<script>
/**
 *  @name BehoerdeItem
 *  ------------------------------------------------------
 *  Komponente für die Kacheln der einzelnen Einrichtungen
 * @author DigS-Gov Projekt
 *  ------------------------------------------------------
 *
 *  Eigenschaften wie Label, Name des Icons und Position werden mittels 'props' eine Ebene höher überliefert (siehe 'Strassennetz.vue')
 */

import Icon_Religionsgemeinschaft from "./icons/Icon_Religionsgemeinschaft.vue";
import Icon_Krankenkasse from "./icons/Icon_Krankenkasse.vue";
import Icon_Parteien from "./icons/Icon_Parteien.vue";
import Icon_Wegzugsmeldebehoerde from "./icons/Icon_Wegzugsmeldebehoerde.vue";
import Icon_Jubilaeen from "./icons/Icon_Jubilaeen.vue";
import Icon_LandesamtFuerStatistik from "./icons/Icon_LandesamtFuerStatistik.vue";
import Icon_Auslaenderbehoerde from "./icons/Icon_Auslaenderbehoerde.vue";
import Icon_GEZ from "./icons/Icon_GEZ.vue";
import Icon_DeutscheRentenversicherung from "./icons/Icon_DeutscheRentenversicherung.vue";
import Icon_Bundeswehr from "./icons/Icon_Bundeswehr.vue";
import Icon_KFZBundesamt from "./icons/Icon_KFZBundesamt.vue";
import Icon_Bundesverwaltungsamt from "./icons/Icon_Bundesverwaltungsamt.vue";
import Icon_BundeszentralamtFuerSteuern from "./icons/Icon_BundeszentralamtFuerSteuern.vue";
import Icon_Zuzugsmeldebehoerde from "./icons/Icon_Zuzugsmeldebehoerde.vue";

import { store } from "../store.js";

export default {
  data() {
    return {
      origin_x: this.x, // vom admin angegebener x-Wert des BehoerdeItems
      origin_y: this.y, // vom admin angegebener y-Wert des BehoerdeItems
      fieldnameRowOne: "", // Label Zeile 1
      fieldnameRowTwo: "", // Label Zeile 2
      store,
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    field_name: {
      type: String,
      required: false,
      default: "Amt XY",
    },
    x: {
      type: String,
      required: false,
      default: "0",
    },
    y: {
      type: String,
      required: false,
      default: "0",
    },
    width: {
      type: String,
      required: false,
      default: "200",
    },
    height: {
      type: String,
      required: false,
      default: "120",
    },
    is_main_node: {
      type: Boolean,
      requred: false,
    },
    icon_name: {
      type: String,
      required: false,
      default: "Icon_Wegzugsmeldebehoerde",
    },
    value_name: {
      type: String,
      required: false,
    },
    force_active: {
      type: Boolean,
    },
    hovered: {
      type: Boolean,
    },
  },
  methods: {
    /**
     * Logik für Klick auf Kachel
     */
    widgetClick() {
      // Click-Action für Eingabe-Seite
      if (this.$route.path.includes(store.config.route_eingabe)) {
        if (store.values[this.value_name]) {
          store.values[this.value_name] = false;
        } else {
          store.values[this.value_name] = true;
        }
      }
      // Click-Action für Aufloesung-Seite
      else {
        store.aufloesung_popup = "";
        if (store.info_popup == this.value_name) {
          store.info_popup = "";
        } else {
          store.info_popup = this.value_name;
        }
      }
    },
  },
  computed: {
    /**
     * Verändert x-Wert der Kachel je nach Situation
     */
    computeX() {
      const checkPopup = store.info_popup;
      if (checkPopup == this.value_name) {
        return 450;
      } else {
        return this.origin_x;
      }
    },
    /**
     * Verändert y-Wert der Kachel je nach Situation
     */
    computeY() {
      const checkPopup = store.info_popup;
      if (checkPopup == this.value_name) {
        return 275;
      } else {
        return this.origin_y;
      }
    },
    /**
     * Generiert 1- oder 2-zeiliges Label für Kachel
     */
    createFieldName() {
      var str = this.field_name;
      var hasTwoRows = false;
      if (str.length <= 20 || undefined || null) {
        this.fieldnameRowOne = str;
      }
      // Zweite Zeile wird nur angelegt, wenn Text nicht in erste Zeile passt
      if (str.length > 20) {
        var hasTwoRows = true;
        // Nur wenn es Leerzeichen gibt, versuchen danach zu splitten
        if (/\s/g.test(str)) {
          var words = str.split(" ");
          var lastWord = words[words.length - 1];
          words.pop(lastWord);
          words.forEach((el) => {
            if (el == words[0]) {
                this.fieldnameRowOne += el;
            } else {
              if(this.fieldnameRowOne.length <= 17){
                this.fieldnameRowOne += " " + el;
              }
              else{
                this.fieldnameRowTwo += " " + el;
              }
            }
          });
          this.fieldnameRowTwo += " " + lastWord;
        } else {
          this.fieldnameRowOne = str;
        }
      }
      return hasTwoRows;
    },
  },
  components: {
    Icon_Religionsgemeinschaft,
    Icon_Krankenkasse,
    Icon_Parteien,
    Icon_Wegzugsmeldebehoerde,
    Icon_Jubilaeen,
    Icon_LandesamtFuerStatistik,
    Icon_Auslaenderbehoerde,
    Icon_GEZ,
    Icon_DeutscheRentenversicherung,
    Icon_Bundeswehr,
    Icon_KFZBundesamt,
    Icon_Bundesverwaltungsamt,
    Icon_BundeszentralamtFuerSteuern,
    Icon_Zuzugsmeldebehoerde,
  },
};
</script>

<template>
  <svg
    class="widget_base"
    :class="{
      widget_hovered: hovered,
      main_node: is_main_node,
      widget_static:
        !store.config.variante_B && $route.path.includes(store.config.route_eingabe),
    }"
    :id="id"
    :width="width"
    :height="height"
    :x="computeX"
    :y="computeY"
    :clicked="
      store.values[this.value_name] && !$route.path.includes(store.config.route_onboarding)
    "
    @mouseenter="hovered ? (hovered = false) : (hovered = true)"
    @mouseleave="hovered ? (hovered = false) : (hovered = true)"
    @click="widgetClick"
  >
    <rect
      id="Hintergrund"
      class="background_base"
      :class="{
        background_hovered: hovered,
        background_active:
          (store.values[this.value_name] &&
            store.config.variante_B &&
            !store.config.variante_C) ||
          (force_active && store.config.variante_B),
        info_popup_frame: store.info_popup == this.value_name,
        main_node_background: is_main_node,
      }"
      :x="width / 2 - (width * 0.9) / 2"
      :y="height / 2 - (height * 0.85) / 2"
      :width="width * 0.9"
      :height="height * 0.85"
      data-name="Hintergrund"
      rx="15"
      ry="15"
    />

    <text
      class="text_base"
      :class="{ main_node_font: is_main_node }"
      x="50%"
      :y="[createFieldName ? '68%' : '70%']"
    >
      <tspan>{{ fieldnameRowOne }}</tspan>
      <tspan :x="width / 2" dy="1em" v-if="createFieldName">
        {{ fieldnameRowTwo }}
      </tspan>
    </text>
    <svg :x="width / 2 - (width / 2) * 0.8" :y="height / 2 - height * 0.4">
      <component
        :is="icon_name"
        :clicked="
          (store.values[this.value_name] &&
            !$route.path.includes(store.config.route_onboarding)) ||
          store.info_popup == this.value_name ||
          force_active ||
          ($route.path.includes(store.config.route_aufloesung) && store.config.variante_B)
        "
        :hovered="hovered"
      />
    </svg>
  </svg>
</template>

<style scoped>
.widget_base {
}
.widget_static {
  pointer-events: none;
}
.widget_hovered {
  cursor: pointer;
}
.text_base {
  fill: var(--color-behoerdeitem-text);
    font-size: 14px;
  }
  
  .text_clicked {}
  
  .background_base {
    fill: var(--color-behoerdeitem-bg);
}
.background_hovered {
  stroke: lightgray !important;
  stroke-width: 5;
}
.background_active {
  stroke: var(--color-background-clicked);
  stroke-width: 5;
}
.main_node {
  pointer-events: none;
}
.main_node_background {
  fill: var(--color-background-main-node);
}
.info_popup_frame {
  stroke: white;
  stroke-width: 5;
}
.main_node_font {
  fill: white;
  font-size: 17px;
}
text {
  text-anchor: middle;
  dominant-baseline: central;
}
</style>
