<script>
/**
 *  @name Popup
 *  ------------------------------------------------------
 *  Komponente für das Popup auf der Aufloesung-Seite
 * @author DigS-Gov Projekt
 *  ------------------------------------------------------
 *
 *  Ein Popup mit variablem Inhalt. Wird hauptsächlich über aktuellen Status in 'store.js' gesteuert
 */

import { store } from "../store.js";
import Icon_FileTransfer from "./icons/Icon_FileTransfer.vue";
import Icon_Info from "./icons/Icon_Info.vue";
import Icon_Tasks from "./icons/Icon_Tasks.vue";
import Icon_Question from "./icons/Icon_Question.vue";
import Icon_Back from "./icons/Icon_Back.vue";
import { nextTick } from "vue";

export default {
  components: { Icon_FileTransfer, Icon_Info, Icon_Tasks, Icon_Question, Icon_Back },
  data() {
    return {
      store,
      heading: "",
      cases_for_rightside: [
        "bundesverwaltungsamt",
        "deutsche_rentenversicherung",
        "jubilaeen",
        "wegzugsmeldebehoerde",
        "bundeswehr",
      ],
      hovered_question: false,
      clicked_question: false,
    };
  },
  methods: {
    /**
     * Generiert einen mehrzeiligen Text mithilfe von svg-<tspan>-Elementen
     * @param {string} raw_text Der rohe, zu verarbeitende Text
     * @param {string} parent_element_id ID des Elternobjekts des zu erstellenden Texts
     * @param {number} max_chars Maximale Zeichen pro Zeile
     * @param {number} x Verschiebung des Texts auf x-Achse von 0-100
     * @param {boolean} bold Text in bold (true,false)
     */
    async generateText(raw_text, parent_element_id, max_chars, x, bold) {
      // Warten, bis neue DOM-Änderungen fertig sind
      await nextTick();

      const parent = document.getElementById(parent_element_id);
      const splitted_text = raw_text.split(/[ ]+/);

      var loop_count = 0;
      while (splitted_text.length != 0) {
        var tspan_text = "";
        // Wenn einzelnes Wort gleichlang bzw. länger ist, als max_chars, füge der Zeile das ganze Wort hinzu
        if(splitted_text[0].length>=max_chars){
          tspan_text+=splitted_text.shift() + " ";
        }
        while (
          splitted_text.length != 0 &&
          (tspan_text + splitted_text[0] + " ").length <= max_chars
        ) {
          tspan_text += splitted_text.shift() + " ";
        }
        var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
        tspan.setAttribute("x", x + "%");
        if (bold) {
          tspan.setAttribute("style", "font-weight:bold");
        }
        if (loop_count > 0) {
          tspan.setAttribute("dy", "1.2em");
        }
        tspan.innerHTML = tspan_text;
        parent.append(tspan);

        loop_count++;
      }
    },
  },
  computed: {
    /**
     * 1. Setzt Haupt-Überschrift "Richtig" oder "Falsch"
     * 2. Gibt true oder false zurück, je nachdem ob richtig oder falsch geraten wurde
     */
    setHeading() {
      var heading_text = "";
      if (
        store.checked_values[store.aufloesung_popup] &&
        !store.correct_values[store.aufloesung_popup].warnung
      ) {
        heading_text = "Richtig,";
      }
      if (
        !store.checked_values[store.aufloesung_popup] &&
        !store.correct_values[store.aufloesung_popup].warnung
      ) {
        heading_text = "Falsch,";
      }
      this.heading = heading_text;
      return store.checked_values[store.aufloesung_popup] ? true : false;
    },
    /**
     * Gibt true oder false zurück, je nachdem ob automatische Datenweitergabe zu dem Amt erfolgt, oder nicht
     */
    checkBehoerde() {
      return store.automatische_datenweitergabe.includes(store.aufloesung_popup)
        ? true
        : false;
    },
    /**
     * Gibt String für Unterüberschrift zurück
     */
    setSubHeading() {
      if (
        store.correct_values[store.aufloesung_popup].datenfluss &&
        !store.correct_values[store.aufloesung_popup].warnung
      ) {
        return "hier fließen Daten.";
      }
      if (
        !store.correct_values[store.aufloesung_popup].datenfluss &&
        !store.correct_values[store.aufloesung_popup].warnung
      ) {
        return "hier fließen keine Daten.";
      }
    },
    /**
     * Gibt den X-Wert für das SVG zurück, je nachdem, ob das Popup links oder rechts erscheinen soll
     */
    calcView() {
      if (store.aufloesung_popup != "") {
        // default (links)
        var x = "30";

        this.cases_for_rightside.forEach((el) => {
          if (el == store.aufloesung_popup) {
            // rechts
            x = "690";
          }
        });

        return x;
      }
      if (store.info_popup != "") {
        // Info-Popup immer rechts
        return "700";
      }
    },
    //#region Berechnungen für Texte
    computeDataText() {
      const currentInstitution = store.aufloesung_popup;
      const text = store.config.data_section[currentInstitution];
      const parent_id = "popup_data_section_text_field";
      this.generateText(text, parent_id, 35, 20, false);
    },
    computeLawText() {
      const currentInstitution = store.aufloesung_popup;
      const text = store.config.law_section[currentInstitution];
      const parent_id = "popup_law_section_text_field";
      this.generateText(text, parent_id, 35, 20, false);
    },
    computeInfoHeading() {
      const currentInstitution = store.info_popup;
      const text = store.config.info_text[currentInstitution].heading;
      const parent_id = "popup_info_heading";
      this.generateText(text, parent_id, 29, 17, true);
    },
    computeInfoText() {
      const currentInstitution = store.info_popup;
      const text = store.config.info_text[currentInstitution].text;
      const parent_id = "popup_info_text";
      this.generateText(text, parent_id, 40, 0, false);
    },
    computeWarningHeading() {
      const currentInstitution = store.aufloesung_popup;
      const text = this.checkWiderspruch
        ? store.config.widerspruch_text
        : store.config.ausnahmen_text[currentInstitution];
      const parent_id = "heading_warning";
      this.generateText(text, parent_id, 32, 0, true);
    },
    computeVarBHeading() {
      const currentInstitution = store.aufloesung_popup;
      var text = "";
      if (store.correct_values[currentInstitution].lkw) {
        text = "Hier erfolgt eine automatische Datenweitergabe.";
      }
      else if(store.correct_values[currentInstitution].stopp) {
        text = "Hier erfolgt keine automatische Datenweitergabe.";
      }
      const parent_id = "heading_varB";
      this.generateText(text, parent_id, 30, 0, true);
    },
    /**
     * Prüft, ob bei der aktuellen Einrichtung ein Widerspruch möglich ist
     */
    checkWiderspruch() {
      const widerspruch_moeglich = store.config.widerspruch_moeglich;
      return widerspruch_moeglich.includes(store.aufloesung_popup);
    },
    /**
     * Prüft, ob bei der aktuellen Einrichtung bestimmte Bedinungen für die Datenweitergabe bestehen
     */
    showQuestion() {
      const correct_values = store.correct_values;
      return correct_values[store.aufloesung_popup].warnung;
    },
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    y: {
      type: String,
      required: false,
      default: "120",
    },
    width: {
      type: String,
      required: false,
      default:"390"
    },
    height: {
      type: String,
      required: false,
      default: "530",
    },
  },
};

</script>

<template>
  <svg class="popup_base" :width="width" :height="height" :x="calcView" :y="y">
    <rect
      id="Hintergrund"
      class="background_base"
      data-name="Hintergrund"
      rx="15"
      ry="15"
      width="100%"
      height="100%"
    />
    <!-- Bereich "Auflösung" -->
    <svg
      id="aufloesung_content"
      v-if="store.aufloesung_popup != '' && store.info_popup == ''"
    >
      <!-- Überschrift -->
      <svg id="section_heading" height="25%" y="5%" width="85%" x="10%">
        <!-- 
        <text
          id="heading"
          v-if="
            !store.correct_values[store.aufloesung_popup].warnung &&
            store.config.variante_A
          "
          x="-2"
          class="heading_base"
          :class="{
            heading_correct: setHeading,
            heading_wrong: !setHeading,
          }"
        >
          {{ heading }}
        </text>
        <text
          id="subheading"
          v-if="
            !store.correct_values[store.aufloesung_popup].warnung &&
            store.config.variante_A
          "
          :class="{
            heading_correct: setHeading,
            heading_wrong: !setHeading,
          }"
          y="65%"
        >
          {{ setSubHeading }}
        </text>
        -->
        <text
          id="heading_warning"
          x="-2"
          v-if="store.correct_values[store.aufloesung_popup].bedingt"
          class="heading_warning"
        >
          <!-- Hier wird mittels 'computeWarningHeading' die mehrzeilige Überschrift generiert -->
          {{ computeWarningHeading }}
      </text>
        <text
          id="heading_varB"
          x="-2"
          v-if="
            !store.correct_values[store.aufloesung_popup].warnung
          "
          class="heading_varB"
        >
          {{ computeVarBHeading }}
        </text>
      </svg>
      
      <!-- Icon und Text für Daten im Paket bei der Datenweitergabe -->
      <svg
        id="section_data"
        height="33%"
        y="30%"
        width="90%"
        x="10%"
        v-show="!clicked_question"
      >
        <rect></rect>
        <Icon_FileTransfer />
        <text x="20%" class="subsection_base top_baseline" id="heading_section_data">
          Daten im Paket
        </text>
        <text id="popup_data_section_text_field" class="text_base" x="20%" y="20%">
          {{ computeDataText }}
        </text>
      </svg>
      <!-- Icon und Text für Gesetzliche Grundlagen bei der Datenweitergabe -->
      <svg
        id="section_law"
        height="35%"
        y="65%"
        width="90%"
        x="10%"
        v-show="!clicked_question"
      >
        <rect></rect>
        <text id="paragraph_symbol" y="-3" x="-1"
        v-if="store.aufloesung_popup === 'krankenkasse'">!</text>
        <text id="paragraph_symbol" y="-3" x="-1"
        v-if="store.aufloesung_popup !== 'krankenkasse'">§</text>
        <text x="20%" class="subsection_base top_baseline" id="heading_section_data"
        v-if="store.aufloesung_popup !== 'krankenkasse'">
          Gesetzliche Grundlage
        </text>
        <text x="20%" class="subsection_base top_baseline" id="heading_section_data"
        v-if="store.aufloesung_popup === 'krankenkasse'">
          Hinweis
        </text>
        <text id="popup_law_section_text_field" class="text_base" x="25%" y="20%">
          {{ computeLawText }}
        </text>
      </svg>
    </svg>
    <!-- Bereich "Info" -->
    <svg id="info_content" v-if="store.info_popup != '' && store.aufloesung_popup == ''">
      <!-- Icon und Überschrift -->
      <svg id="section_info_heading" width="82%" x="10%" y="10%">
        <rect></rect>
        <Icon_Tasks />
        <text id="popup_info_heading" class="subsection_base" y="5%">
          {{ computeInfoHeading }}
        </text>
      </svg>
      <!-- Text zu Aufgaben der Einrichtung -->
      <svg id="section_info_text" height="70%" width="80%" x="10%" y="25%">
        <rect></rect>
        <text id="popup_info_text" class="text_base" y="10%">
          {{ computeInfoText }}
        </text>
      </svg>
    </svg>
    <text v-if="store.aufloesung_popup == 'religionsgemeinschaft'" class="text_base" y="450" width="85%" x="10%">
          <tspan>Ist nur Ihr*e Ehe-/Lebenspartner*in Mitglied in </tspan>
          <tspan x="10%" dy="1.2em">einer Religionsgemeinschaft, können Sie der </tspan>
          <tspan x="10%" dy="1.2em">Weitergabe Ihrer Daten durch eine </tspan>
          <tspan x="10%" dy="1.2em">Übermittlungssperre widersprechen.</tspan>
        </text>
  </svg>
</template>

<style scoped>
#section_widerspruch text {
  font-size: 16px;
  dominant-baseline: central;
  fill: var(--color-dark-blue);
}
#section_widerspruch rect {
  /* fill: gray; */
  opacity: 0;
  width: 100%;
  height: 100%;
}
#section_data rect {
  /* fill:lightblue; */
  opacity: 0;
  width: 100%;
  height: 100%;
}
#paragraph_symbol {
  /* font-weight: bold; */
  font-size: 40px;
  dominant-baseline: hanging;
  fill: var(--vt-c-text-light-1);
  }
  
  #section_law rect {
    /* fill: lightblue; */
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  
  .central_baseline {
    dominant-baseline: central;
  }
  
  .top_baseline {
    dominant-baseline: hanging;
  }
  
  
  @media (prefers-color-scheme: light) {
    .popup_base {
      filter: drop-shadow(4px 6px 20px gray);
    }
  }
  
  .text_base {
    fill: var(--vt-c-text-light-1);
    font-size: 14px;
  }
  
  .text_grey {
    fill: grey;
    font-size: 14px;
  }
  
  .text_grey_hovered {
    text-decoration: underline;
    fill: var(--color-highlight);
  }
  
  .subsection_base {
    fill: var(--vt-c-text-light-1);
    font-weight: bold;
    font-size: 18px;
  }
  
  .background_base {
    fill: #ffffff;
  }
  
  .text_base {
    text-anchor: left;
    dominant-baseline: central;
  }
  
  .heading_base {
    font-size: 30px;
    dominant-baseline: hanging;
  }
  
  #subheading {
    dominant-baseline: bottom;
  }
  
  .heading_correct {
    fill: var(--color-correct) !important;
  }
  
  .heading_wrong {
    fill: var(--color-wrong) !important;
  }
  
  .heading_warning {
    /* fill: rgb(238, 205, 6); */
      fill: var(--vt-c-blue);
      font-size: 18px;
      dominant-baseline: hanging;
    }
    
    .heading_varB {
      fill: var(--vt-c-blue);
  font-size: 18px;
  dominant-baseline: hanging;
}
#warning_bg {
  width: 100%;
  height: 100%;
  opacity: 0;
}
#section_question:hover {
  cursor: pointer;
}
#section_question rect {
  opacity: 0;
}
</style>
