<script setup>
/**
 *  @name App
 *  ------------------------------------------------------
 *  Container für die verschiedenen Pages
 * @author DigS-Gov Projekt
 *  ------------------------------------------------------
 *  Diese Datei ist das Grundgerüst des Quizes.
 *  Basierend auf der aktuellen Seite wird die Ansicht angepasst.
 *  Routing und grober Seitenaufbau
 */
import IconCheckCircle from "./components/icons/Icon_CheckCircle.vue";
import IconWrongCircle from "./components/icons/Icon_WrongCircle.vue";
import IconWarning from "./components/icons/Icon_Warning.vue";
import IconTruck from "./components/icons/Icon_Truck.vue";
import IconStopsign from "./components/icons/Icon_Stopsign.vue";
import TruckAndStopsign from "./components/TruckAndStopsign.vue";
import IconBedingt from "./components/icons/Icon_Bedingt.vue"
import { store } from "./store.js";
</script>

<script>
export default {
  components: {
    IconCheckCircle,
    IconWrongCircle,
    IconWarning,
    IconStopsign,
    TruckAndStopsign,
    IconTruck,
    IconBedingt,
  },
  data() {
    return {
      store,
    };
  },
  // (VARIANTEN A-C --> VERALTET)
  // watch:{
  //   $route(to){
  //     if(to.name=="onboarding" || to.name=="eingabe" || to.name=="aufloesung"){
  //       if(!store.config.variante_B && !store.config.variante_C){
  //         store.config.variante_A=true;
  //         // store.setStates();
  //       }
  //       store.config.variante_B= store.config.variante_B?true:false;
  //       store.config.variante_C= store.config.variante_C?true:false;
  //     }
  //     if(to.name=="onboarding_a" || to.name=="eingabe_a" ||to.name=="aufloesung_a" ){
  //       if(!store.config.variante_A){
  //         store.config.variante_A=true;
  //         store.setStates();
  //       }
  //       store.config.variante_A=true;
  //       store.config.variante_B=false;
  //       store.config.variante_C=false;
  //     }
  //     if(to.name=="onboarding_b" || to.name=="eingabe_b" ||to.name=="aufloesung_b" ){
  //       store.config.variante_A=false;
  //       store.config.variante_B=true;
  //       store.config.variante_C=false;
  //     }
  //     if(to.name=="onboarding_c" || to.name=="eingabe_c" ||to.name=="aufloesung_c" ){
  //       if(!store.config.variante_A){
  //         store.config.variante_A=true;
  //         store.setStates();
  //       }
  //       store.config.variante_A=true;
  //       store.config.variante_B=false;
  //       store.config.variante_C=true;
  //     }
  //   }
  // },

  methods: {
    /**
     * Wechselt die Seite mit unterem Button (Eingabe - Aufloesung)
     */
    switchPages() {

      if (this.$route.path.includes(store.config.route_onboarding)) {

        //#region Feste Links (VARIANTEN A-C --> VERALTET)
        // if(this.$route.name=="onboarding_a"){
        //   this.$router.push({name:"eingabe_a"});
        // }
        // if(this.$route.name=="onboarding_b"){
        //   this.$router.push({name:"eingabe_b"});
        // }
        // if(this.$route.name=="onboarding_c"){
        //   this.$router.push({name:"eingabe_c"});
        // }
        //#endregion

        if(this.$route.name=="onboarding"){
          this.$router.push({name:"eingabe"});
        }
      }
      // save the user input
      this.saveUSerInput();

      if (this.$route.path.includes(store.config.route_aufloesung)) {
        if (store.aufloesung_popup != "" || store.info_popup != "") {
          store.aufloesung_popup = "";
          store.info_popup = "";
        } else {
          //#region Feste Links (VARIANTEN A-C --> VERALTET)
          // if(this.$route.name=="aufloesung_a"){
          //   this.$router.push({name:"eingabe_a"});
          // }
          // if(this.$route.name=="aufloesung_b"){
          //   this.$router.push({name:"eingabe_b"});
          // }
          // if(this.$route.name=="aufloesung_c"){
          //   this.$router.push({name:"eingabe_c"});
          // }
          //#endregion

          if (this.$route.name == "aufloesung") {
            this.$router.push({ name: "eingabe" });
          }
        }
      }
      if (this.$route.path.includes(store.config.route_musterloesung)) {
        if (store.aufloesung_popup != "" || store.info_popup != "") {
          store.aufloesung_popup = "";
          store.info_popup = "";
        } else {
          this.$router.push({ name: "eingabe" });
        }
      }
    },
    //Saves the input in the local storage
    saveUSerInput() {
      if (this.$route.path.includes(store.config.route_eingabe)) {
        //Eingaben speichern
        for (var val in store.values){
          localStorage.setItem(val, store.values[val]);
              localStorage.removeItem("default");
            }

        //#region Feste Links (VARIANTEN A-C --> VERALTET)
        // if(this.$route.name=="eingabe_a"){
        //   this.$router.push({name:"aufloesung_a"});
        // }
        // if(this.$route.name=="eingabe_b"){
        //   this.$router.push({name:"aufloesung_b"});
        // }
        // if(this.$route.name=="eingabe_c"){
        //   store.config.variante_C=true;
        //   this.$router.push({name:"aufloesung_c"});
        // }
        //#endregion

        if(this.$route.name=="eingabe"){
          this.$router.push({name:"aufloesung"});
        }
      }
    },
    /**
      * Wechselt zwischen Musterlösung und Auflösung der Nutzereingaben
      */
    switchSolutionView() {
      if (this.$route.name == "aufloesung") {
        this.$router.push({ name: "musterloesung" });
      } else {
        this.$router.push({ name: "aufloesung" });
      }
    },
    returnHome() {

      //#region Feste Links (VARIANTEN A-C --> VERALTET)
      // if(this.$route.name=="eingabe_a" || this.$route.name=="aufloesung_a"){
      //   this.$router.push({name:"onboarding_a"});
      // }
      // if(this.$route.name=="eingabe_b" || this.$route.name=="aufloesung_b"){
      //   this.$router.push({name:"onboarding_b"});
      // }
      // if(this.$route.name=="eingabe_c" || this.$route.name=="aufloesung_c"){
      //   this.$router.push({name:"onboarding_c"});
      // }
        //#endregion

      if (this.$route.name == "eingabe" || this.$route.name == "aufloesung" || this.$route.name == "musterloesung"){
          this.saveUSerInput();
          this.$router.push({name:"onboarding"});
        }
    },

    // (VARIANTEN A - C-- > VERALTET)
    // switchToA() {
    //   store.config.variante_A = true;
    //   store.config.variante_B = false;
    //   store.setStates();
    // },
    // switchToB() {
    //   store.config.variante_B = true;
    //   store.config.variante_A = false;
    //   store.setStates();
    // },
    // switchToC() {
    //   if (store.config.variante_C) {
    //     store.config.variante_C = false;
    //   } else {
    //     store.config.variante_C = true;
    //   }
    // },
  },
  computed: {
    /**
     * Verändert je nach Situation die Beschriftung des großen blauen Buttons im Footer
     */
    setBtnText() {
      if (this.$route.path.includes(store.config.route_onboarding)) {
        return "Bereit? Los geht's!";
      }
      if (this.$route.path.includes(store.config.route_eingabe)) {
        return "Zur Auflösung";
      }
      if (this.$route.path.includes(store.config.route_aufloesung) || this.$route.path.includes(store.config.route_musterloesung)) {
        if (store.aufloesung_popup != "" || store.info_popup != "") {
          return "Schließen";
        } else {
          return "Zurück zur Eingabe";
        }
      }
    },
    /**
    * Verändert je nach Seite die Beschriftung des SolutionView-Buttons
    */
    setSolBtnText() {
      if (this.$route.path.includes(store.config.route_aufloesung)) {
          return "Zur Musterlösung";
        } else {
          return "Zu Ihren Antworten";
        }
    },
    /**
     * Verändert je nach aktueller Page die Überschrift im Header
     */
    setHeaderText() {
      if (this.$route.path.includes(store.config.route_onboarding)) {
        return "Ummeldung: Auch Ihre Daten ziehen um!";
      }
      // if (this.$route.path.includes(store.config.route_eingabe)) {
      //   if (store.config.variante_A) {
      //     return store.config.header_varA;
      //   }
      //   if (store.config.variante_B) {
      //     return store.config.header_varB;
      //   }
      // }
       if (this.$route.path.includes(store.config.route_eingabe)) {
        return "Quiz";
      }
      if (this.$route.path.includes(store.config.route_aufloesung)) {
        return "Auflösung";
      }
      if (this.$route.path.includes(store.config.route_musterloesung)) {
        return "Musterlösung";
      }
    },
    setSubHeaderText() {
      if (this.$route.path.includes(store.config.route_eingabe)) {
        if (store.config.variante_A) {
          return store.config.header_varA;
        }
        // (VARIANTEN A - C-- > VERALTET)
        // if (store.config.variante_B) {
        //   return store.config.header_varB;
        // }
      }
      if (this.$route.path.includes(store.config.route_aufloesung)) {
        return store.config.header_aufloesung;
      }
      if (this.$route.path.includes(store.config.route_musterloesung)) {
        return store.config.header_musterloesung;
      }
    },
    computeScore() {
      // Gibt wieder, wie viele der 5 automatischen Datenweitergaben erkannt wurden.
      // return store.checkValues() + "/5";

      // Gibt wieder, wie viel Prozent der 7 möglichen Richtig/Falsch-Eingaben korrekt waren
      return store.checkValues() + " von 12"
    },
  },
};
</script>
<template>
  <header>
    <h1>
      {{ setHeaderText }}
    </h1>
    <a @click="returnHome" class="link" v-if="
      $route.path.includes(store.config.route_eingabe) ||
      $route.path.includes(store.config.route_aufloesung) ||
      $route.path.includes(store.config.route_musterloesung)
    ">zur Startseite</a>
    <section id="subHeading">
          <div class="scoreMuster">
             <!-- <p id="score_text" v-if="store.config.variante_B && !store.config.variante_C && $route.path.includes(store.config.route_aufloesung)"> -->
            <p id="score_text"
             v-if="store.config.variante_A && !store.config.variante_C && $route.path.includes(store.config.route_aufloesung)">
            Sie haben
            <strong>{{ computeScore }}</strong>
            <!-- Datenweitergaben, die automatisch erfolgen, richtig erkannt! -->
           Datenflüsse korrekt bennant!
            </p>
             <!-- side legend 2 aufloesung seite -->
            <section v-if="$route.path.includes(store.config.route_aufloesung) || $route.path.includes(store.config.route_musterloesung)" class="musterloesung">
              <button @click="switchSolutionView">{{ setSolBtnText }}</button>
          </section>
          <!-- / -->
        </div>
    </section>
    <span class="sub_heading_text">
        {{ setSubHeaderText }}
      </span>
  </header>
  <main>
  <section id = "main_view">
    <section id = "side_info_holder" v-if="!$route.path.includes(store.config.route_onboarding)" >
      </section>
    <section id="main_strassennetz">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </section>
    <section id="side_content" class="side_info" v-if="!$route.path.includes(store.config.route_onboarding)">
          <!-- (VARIANTEN A - C-- > VERALTET) -->
          <!-- side legend var c -->
          <!-- <section id="side_legend_varC" class="side_info_content"
            v-if="$route.path.includes(store.config.route_aufloesung) && store.config.variante_C">
            <div id="side_legend_varC_content">
              <h4>Ihre Antwort war ...</h4>
              <br />
              <table>
                <tr>
                  <td>
                    <svg id="street_green" width="60" height="15">
                      <rect class="green_street" width="60" height="15"></rect>
                      <line class="street_lines" x1="0" y1="7.5" x2="60" y2="7.5" />
                    </svg>
                  </td>
                  <td>
                    <p>richtig!</p>
                  </td>
                </tr>
                <tr>
                  <td>
                    <svg id="street_red" width="60" height="15">
                      <rect class="red_street" width="60" height="15"></rect>
                      <line class="street_lines" x1="0" y1="7.5" x2="60" y2="7.5" />
                    </svg>
                  </td>
                  <td>
                    <p>leider falsch.</p>
                  </td>
                </tr>
                <tr>
                  <td>
                    <svg id="street_yellow" width="60" height="15">
                      <rect class="yellow_street" width="60" height="15"></rect>
                      <line class="street_lines" x1="0" y1="7.5" x2="60" y2="7.5" />
                    </svg>
                  </td>
                  <td>
                    <p>abhängig von weiteren Bedingungen.</p>
                  </td>
                </tr>
              </table>
            </div>
          </section> -->
        <!-- / -->
      
        <!-- side legend eingabe seite -->
        <section id="side_legend" class="side_info_content" v-if="$route.path.includes(store.config.route_eingabe)">
          <div id="side_legend_content">
            <h4>Datenweitergabe</h4>
            <br />
            <table>
              <tr>
                <td>
                  <IconTruck static_color />
                </td>
                <td>
                  <p>
                    Daten werden immer weitergegeben
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <IconBedingt/>
                </td>
                <td>
                  <p>
                    Daten werden nur bedingt weitergegeben
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <IconStopsign/>
                </td>
                <td>
                  <p>
                    Daten werden niemals weitergegeben
                  </p>
                </td>
              </tr>
            </table>
          </div>
        </section>
        <!-- / -->
      
        <!-- side legend aufloesung seite -->
        <section id="side_legend" class="side_info_content" v-if="$route.path.includes(store.config.route_aufloesung)">
          <div id="side_legend_content">
            <h4>Ihre Antworten</h4>
            <br />
            <table>
              <tr>
                <td>
                  <IconCheckCircle v-if="store.config.variante_A && !store.config.variante_C" />
                  <IconTruck v-if="store.config.variante_B || store.config.variante_C"></IconTruck>
                </td>
                <td>
                  <p v-if="store.config.variante_A && !store.config.variante_C">
                    Richtige Antwort.
                  </p>
                  <p v-if="store.config.variante_B || store.config.variante_C">
                    Daten werden automatisch weitergegeben.
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <IconWrongCircle v-if="store.config.variante_A && !store.config.variante_C" />
                  <IconStopsign v-if="store.config.variante_B || store.config.variante_C"></IconStopsign>
                </td>
                <td>
                  <p v-if="store.config.variante_A && !store.config.variante_C">
                    Falsche Antwort.
                  </p>
                  <p v-if="store.config.variante_B || store.config.variante_C">
                    Daten werden nicht automatisch weitergegeben.
                  </p>
                </td>
              </tr>
              <tr>
                <td>                 
                  <TruckAndStopsign v-if="store.config.variante_B || store.config.variante_C" width="60" height="63"
                    page2_active="true" truck_active warning_active static></TruckAndStopsign>
                </td>                
              </tr>
            </table>
          </div>
        </section>
        <!-- / -->
      
        <!-- side legend musterloesung seite -->
        <section id="side_legend" class="side_info_content" v-if="$route.path.includes(store.config.route_musterloesung)">
          <div id="side_legend_content">
            <h4>Datenweitergabe</h4>
            <br />
            <table>
              <tr>
                <td>
                  <IconTruck static_color />
                </td>
                <td>
                  <p>
                    Daten werden immer weitergegeben
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <IconBedingt />
                </td>
                <td>
                  <p>
                    Daten werden nur bedingt weitergegeben
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <IconStopsign/>
                </td>
                <td>
                  <p>
                    Daten werden niemals weitergegeben
                  </p>
                </td>
              </tr>
            </table>
          </div>
        </section>
        <!-- / -->

        <!-- side info aufloesung seite -->
        <section id="side_legend" v-if="$route.path.includes(store.config.route_aufloesung)" class="side_info_content">
          <div id="side_info_content">
            <h4>Was Sie auch noch interessieren könnte:</h4>
            <br />
            <ul>
              <li><a href="https://www.luebeck.de/de/buergerservice/leistungen/index.html?lid=8967090&zufi=1&bereich=0" target="_blank" rel="noopener noreferrer">Weitere Informationen zur Ummeldung (für Lübeck)</a></li>
              <li><a href="https://bekanntmachungen.luebeck.de/dokumente/d/162" target="_blank" rel="noopener noreferrer">Formular für Widerspruch gegen Datenübermittlung (für Lübeck)</a></li>
              <li><a href="https://zufish.schleswig-holstein.de" target="_blank" rel="noopener noreferrer">Weitere Behördendienstleistungen in Schleswig-Holstein</a></li>
            </ul>
          </div>
        </section>
      </section>
    </section>
    </main>
    <footer>
      <button class="switchPagesButton" @click="switchPages">{{ setBtnText }}</button>
      <!-- (VARIANTEN A - C-- > VERALTET) -->
    <!-- <section id="varianten_auswahl" v-if="$route.path==store.config.route_onboarding || $route.path==store.config.route_eingabe || $route.path==store.config.route_aufloesung">
      <a @click="switchToA" class="link" :class="{ link_active: store.config.variante_A }"
        >A</a
      >
      |
      <a @click="switchToB" class="link" :class="{ link_active: store.config.variante_B }"
        >B</a
      >
      |
      <a @click="switchToC" class="link" :class="{ link_active: store.config.variante_C }"
        >C</a
      >
    </section> -->
  </footer>
</template>

<style type="css">
@import "./assets/base.css";
main {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
  text-align: center;
}
#main_strassennetz{
  justify-content: center;
  width: 1100px;
}

#main_view{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.side_info {
  position: sticky;
  align-content: top;
  justify-content: right;
  width: 437px;
}
#side_info_holder{
  width: 437px;
}
#varianten_auswahl {
  margin: auto;
  margin-top: 300px;
  margin-bottom: 30px;
}
.side_info_content {

  position: relative;
  text-align: left;
  background: white;
  color: var(--vt-c-text-light-1);
    border-radius: 15px;
    padding: 15px;
    margin: 10px;
  }
  
  @media (prefers-color-scheme: light) {
    .side_info_content {
      filter: drop-shadow(4px 6px 20px lightgray);
    }
  }
.side_info h4 {
  font-weight: bold;
}
.side_info ul {
  padding-inline-start: 15px;
  padding-top: 5px;
}

header {
  margin-top: 2%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
button {
  background: rgb(84, 179, 226);
  margin: auto;
  width: 200px;
  height: 75px;
  font-size: 18px;
  font-family: inherit;
  color: white;
  border-color: transparent;
  border-radius: 15px;
  justify-content: center;
}

.switchPagesButton{
  margin-bottom:100px;
}

button:hover {
  background: #069;
  cursor: pointer;
}
h1 {
  font-weight: bold;
  text-align: center;
  fill: currentColor;
}
footer {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#subHeading {
  margin-top: 1%;
  display: flex;
  justify-content: center;
  flex-direction: row;
}
#score_text {
  font-size: 18px;
  border: #069 solid 3px;
  border-radius: 10px;
  margin-right: 10px;
  padding: 10px;
}
#score_value {
  font-weight: bold;
}
p,
a {
  margin: auto;
}

strong {
  font-weight: bold;
  color: #069;
}
.link {
  text-decoration: underline;
}
.link_active {
  color: var(--color-highlight);
}
.link:hover {
  color: var(--color-highlight);
  cursor: pointer;
}
td {
  padding-right: 10px;
}
.green_street {
  fill: rgb(156, 209, 156);
}
.yellow_street {
  fill: rgb(235, 226, 148);
}
.red_street {
  fill: rgb(241, 186, 163);
}
.street_lines {
  stroke: #f2f2f2;
  stroke-width: 1.5px;
  stroke-dasharray: 7.5 7.5;
  stroke-miterlimit: 10;
}
.sub_heading{
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  margin:auto;
  white-space: pre-line;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.musterloesung{
  display: flex;
  align-content: center;
  padding: 10px;
}

.scoreMuster{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.sub_heading_text{
  display: flex;
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  margin:auto;
  white-space: pre-line;
  justify-content: center;
}

</style>
