<script>
/**
 *  @name TruckAndStopSign
 *  ------------------------------------------------------
 *  Komponente für das Fahrzeug-Symbol samt Stoppschild und Richtig/Falsch-Icons
 * @author DigS-Gov Projekt
 *  ------------------------------------------------------
 *
 *  Neben den SVG-Grafiken enthält die Komponente die
 *  Logik für das Umschalten von Fahrzeug zu Stoppschild und Setzen von Richtig/Falsch-Icons
 */

import IconCheckCircle from "./icons/Icon_CheckCircle.vue";
import IconWrongCircle from "./icons/Icon_WrongCircle.vue";
import IconWarning from "./icons/Icon_Warning.vue";
import IconTruck from "./icons/Icon_Truck.vue";
import IconStopsign from "./icons/Icon_Stopsign.vue";
import IconBedingt from "./icons/Icon_Bedingt.vue"
import { store } from "../store.js";
export default {
  components: { IconCheckCircle, IconWrongCircle, IconWarning, IconTruck, IconStopsign, IconBedingt },
  data() {
    return {
      store,
      //#region DOM-Elemente
      dom_element: null,
      original_parent: null,
      popup_parent: null,
      //#endregion
      hovered: false,
      // currentPath: window.location.hash,
    };
  },
  mounted() {
    this.dom_element = document.getElementById(
      "TruckAndStopsign_" + store.id_table[this.value_name]
    );
    this.original_parent = document.getElementById("TruckAndStopsigns");
    this.popup_parent = document.getElementById(
      "Popups_" + store.id_table[this.value_name]
    );

  },
  computed: {
    /**
     * Berechnet die räumliche Ausrichtung des Truck-Icons
     */
    calcView() {
      switch (this.view) {
        case "left":
          return "scale(-2 2) translate(-24 0) rotate(0 12 12)";
        case "right":
          return "scale(2) translate(0 0) rotate(0 12 12)";
        case "up":
          return "scale(2) translate(0 0) rotate(-90 12 12)";
        case "down":
          return "scale(2 -2) translate(0 -24) rotate(-90 12 12)";
        default:
          return "scale(2) translate(0 0) rotate(0 12 12)";
      }
    },
    /**
     * Regelt die Sichtbarkeit des gesamten TruckAndStopsign-Icons
     */
    setVisibility() {
      if (store.config.variante_A) {
        return true;
      }
      if (store.config.variante_B) {
        if (this.$route.path.includes(store.config.route_onboarding)) {
          return true;
        }
        if (this.$route.path.includes(store.config.route_aufloesung)) {
          return true;
        }
        if (store.values[this.value_name]) {
          return true;
        } else {
          return false;
        }
      }
    },
    /**
     * Regelt die Interaktionsmöglichkeit des gesamten TruckAndStopsign-Icons
     */
    setInteractions() {
      if (this.static) {
        return false;
      }
      if (store.config.variante_A) {
        return true;
      } else if (this.$route.path.includes(store.config.route_aufloesung)) {
        return true;
      }
      return false;
    },
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    x: {
      type: String,
      required: true,
    },
    y: {
      type: String,
      required: true,
    },
    view: {
      type: String,
      required: false,
      default: "right",
    },
    blocked: {
      type: Boolean,
      required: false,
    },
    value_name: {
      type: String,
      required: true,
      default: "default",
    },
    page2_active: {
      type: Boolean,
      required: false,
    },
    page3_active: {
      type: Boolean,
      required: false,
    },
    truck_active: {
      type: Boolean,
      required: false,
    },
    stopsign_active: {
      type: Boolean,
      required: false,
    },
    bedingt_active: {
      type: Boolean,
      required: false,
    },
    warning_active: {
      type: Boolean,
      required: false,
    },
    static: {
      type: Boolean,
    },
    static_color: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickAction() {
      // Aktionen für Page 1
      if (this.page2_active == "false") {
        if (store.conditional_values[this.value_name].lkw == true) {
          //Toogle sign
          store.conditional_values[this.value_name].lkw = false;
          store.conditional_values[this.value_name].bedingt = true;
          store.values[this.value_name] = true;
          
        } 
        else if (store.conditional_values[this.value_name].bedingt == true){
          //Toogle sign
          store.conditional_values[this.value_name].bedingt = false;
          store.conditional_values[this.value_name].stopp = true;
          //Toogle authority data flow
          store.values[this.value_name] = false;
        }
        else {
          //Toogle sign
          store.conditional_values[this.value_name].lkw = true;
          store.conditional_values[this.value_name].stopp = false;
          //Toogle authority data flow
          store.values[this.value_name] = true;
         
        }
      }
      // Aktionen für Page 2
      if (this.page2_active == "true") {
        if (store.aufloesung_popup == this.value_name) {
          // Symbol im DOM hinten anordnen
          this.original_parent.append(this.dom_element);
          // Auflösung-Popup wieder auf null setzen
          store.aufloesung_popup = "";
        } else {
          // Info-Popup immer auf null setzen
          store.info_popup = "";
          // Symbol im DOM vorne anordnen
          this.popup_parent.append(this.dom_element);
          // Auflösung-Popup auf aktuellen Wert setzen
          store.aufloesung_popup = this.value_name;
        }
      }
    },
  },
};
</script>
<template>
  <svg
    :id="id"
    :x="x"
    :y="y"
    class="base"
    :class="{ not_interactive: !setInteractions }"
    @click="clickAction"
    @mouseenter="hovered = true"
    @mouseleave="hovered = false"
    v-if="setVisibility"
  >
    <IconTruck
      y="15"
      v-if="
  (store.config.variante_A &&
    store.conditional_values[this.value_name].lkw &&
    !stopsign_active && !bedingt_active &&
    !store.config.variante_C && !$route.path.includes(store.config.route_musterloesung)) ||
    ($route.path.includes(store.config.route_musterloesung) && store.correct_values[this.value_name].lkw)||
  
    (store.config.variante_B &&
    store.correct_values[this.value_name].datenfluss &&
    !stopsign_active &&
    $route.path.includes(store.config.route_aufloesung)) ||
  (store.config.variante_B &&
    store.values[this.value_name] &&
    $route.path.includes(store.config.route_eingabe)) ||
  (store.config.variante_C &&
    $route.path.includes(store.config.route_aufloesung) &&
    store.correct_values[this.value_name].datenfluss) ||
  truck_active || (store.config.variante_C &&
    store.values[this.value_name] &&
    !stopsign_active && $route.path.includes(store.config.route_eingabe)
  )

      "
      :transform="calcView"
      :static_color="static_color"
    ></IconTruck>

    <IconStopsign
      y="15"
      v-if="
   (store.config.variante_A &&
  store.conditional_values[this.value_name].stopp && !bedingt_active && !truck_active &&
    !store.config.variante_C &&  !$route.path.includes(store.config.route_musterloesung)) ||
    ($route.path.includes(store.config.route_musterloesung) && store.correct_values[this.value_name].stopp) ||


  (store.config.variante_B &&
    !store.correct_values[this.value_name].datenfluss &&
    $route.path.includes(store.config.route_aufloesung)) ||
  (store.config.variante_C &&
    !store.correct_values[this.value_name].datenfluss &&
    $route.path.includes(store.config.route_aufloesung)) ||
  stopsign_active || (store.config.variante_C &&
    !store.values[this.value_name] &&
    $route.path.includes(store.config.route_eingabe)
  )
      "
    ></IconStopsign>

    <IconBedingt
      v-if="(store.config.variante_A &&
      store.conditional_values[this.value_name].bedingt&&
      !store.config.variante_C &&  !$route.path.includes(store.config.route_musterloesung)) && !truck_active && !stopsign_active
      || bedingt_active ||
    ($route.path.includes(store.config.route_musterloesung) && store.correct_values[this.value_name].bedingt)">
    </IconBedingt>

    <svg
      id="icon_feedback"
      x="27"
      y="0"
      v-if="
        (page2_active == 'true' && store.config.variante_A) ||
        (store.config.variante_B && page2_active == 'true')
      "
    >
      >
      <IconCheckCircle
        v-if="
  page2_active == 'true' &&
  store.config.variante_A &&
  !store.config.variante_C &&
  store.checked_values[this.value_name] &&
  !store.correct_values[this.value_name].warnung && page3_active == 'false'

        "
        :hovered="hovered"
      ></IconCheckCircle>

      <IconWrongCircle
        v-if="
  page2_active == 'true' &&
  store.config.variante_A &&
  !store.config.variante_C &&
  !store.checked_values[this.value_name] &&
  !store.correct_values[this.value_name].warnung && page3_active == 'false'

        "
        :hovered="hovered"
      ></IconWrongCircle>
     
    </svg>
  </svg>
</template>
<style>
.base:hover {
  cursor: pointer;
}
.base:hover .truck_base path {
  fill: var(--color-truck-hover);
  }
  
  .base:hover #stopsign_circle {
    fill: #fd9292;
  }
.truck_base rect {
  opacity: 0;
}
#stopsign_circle {
  fill: red;
}
#stopsign_rect {
  fill: white;
}
.not_interactive {
  pointer-events: none;
}
</style>
