<script setup>
import { onMounted, ref, watch, nextTick } from "vue";
import { LottieAnimation } from "lottie-web-vue";
import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
import AnimationRechtsBB from "../assets/bbrechts_v2.json";
import AnimationLinksBB from "../assets/bblinks_v2.json";
// import { emit } from "process";

const emit = defineEmits(["falseStatusLottieLoop"]);

let anim = ref(null);
let BBUnselected = true;
let animationData = AnimationDataJSON;
let showAnimation = false;
const lottie = ref(0);

const props = defineProps({
  vorname: {
    type: String,
    required: true,
  },
  nachname: {
    type: String,
    required: true,
  },
  funktionZeileEins: {
    type: String,
    required: true,
  },
  funktionZeileZwei: {
    type: String,
    required: true,
  },
  BBEcke: {
    type: String,
    required: true,
  },
  playLottieStatus: {
    type: Boolean,
    required: true,
  },
  pauseLottieStatus: {
    type: Boolean,
    required: true,
  },
});

function breakLottieFalseLoop() {
  emit("falseStatusLottieLoop", true)
}

watch(
  () => props.BBEcke,
  async () => {
    if (props.BBEcke === "links") {
      animationData = AnimationLinksBB;
      BBUnselected = false;
      showAnimation = true;
      lottie.value++;
      await nextTick();
      if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
        breakLottieFalseLoop();
      }
    }
    if (props.BBEcke === "rechts") {
      animationData = AnimationRechtsBB;
      BBUnselected = false;
      showAnimation = true;
      lottie.value++;
      await nextTick();
      if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
        breakLottieFalseLoop();
      }
    }
  }
);
watch(
  () => props.playLottieStatus,
  () => {
    if (props.playLottieStatus) {
      anim.value.play();
    }
  }
);
watch(
  () => props.pauseLottieStatus,
  () => {
    if (props.pauseLottieStatus) {
      anim.value.pause();
    }
  }
);


// Added array.filter to improve adaptability to different lottie files

watch(
  () => props.vorname,
  async () => {
    animationData.layers.filter((layer) => {
      return layer.nm === "VORNAME";
    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();

    if (props.BBEcke == "links"){
      AnimationRechtsBB.layers.filter((layer) => {
      return layer.nm === "VORNAME";
    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
    } else if (props.BBEcke == "rechts") {
      AnimationLinksBB.layers.filter((layer) => {
      return layer.nm === "VORNAME";
    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
    }

    lottie.value++;
    await nextTick();
    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
      breakLottieFalseLoop();
    }
  }
);

watch(
  () => props.nachname,
  async () => {
    animationData.layers.filter((layer) => {
      return layer.nm === "NACHNAME";
    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();

    if (props.BBEcke == "links"){
      AnimationRechtsBB.layers.filter((layer) => {
      return layer.nm === "NACHNAME";
    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
    } else if (props.BBEcke == "rechts") {
      AnimationLinksBB.layers.filter((layer) => {
      return layer.nm === "NACHNAME";
    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
    }

    lottie.value++;
    await nextTick();
    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
      breakLottieFalseLoop();
    }
  }
);

watch(
  () => props.funktionZeileEins,
  async () => {
    animationData.layers.filter((layer) => {
      return layer.nm === "FUNKTION1";
    })[0].t.d.k[0].s.t = props.funktionZeileEins;
    if (props.BBEcke == "links")
    {
      AnimationRechtsBB.layers.filter((layer) => {
      return layer.nm === "FUNKTION1";
    })[0].t.d.k[0].s.t = props.funktionZeileEins;
    } else if (props.BBEcke == "rechts") {
      AnimationLinksBB.layers.filter((layer) => {
      return layer.nm === "FUNKTION1";
    })[0].t.d.k[0].s.t = props.funktionZeileEins;
    }
    lottie.value++;
    await nextTick();
    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
      breakLottieFalseLoop();
    }
  }
);

watch(
  () => props.funktionZeileZwei,
  async () => {
    animationData.layers.filter((layer) => {
      return layer.nm === "FUNKTION2";
    })[0].t.d.k[0].s.t = props.funktionZeileZwei;

    if (props.BBEcke == "links")
    {
      AnimationRechtsBB.layers.filter((layer) => {
      return layer.nm === "FUNKTION2";
    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
    } else if (props.BBEcke == "rechts") {
      AnimationLinksBB.layers.filter((layer) => {
      return layer.nm === "FUNKTION2";
    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
    }

    lottie.value++;
    await nextTick();
    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
      breakLottieFalseLoop();
    }
  }
);

function setMaxMustermann() {
  animationData = AnimationRechtsBB;
  animationData.layers[1].t.d.k[0].s.t = "MAX";
  animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
  animationData.layers[5].t.d.k[0].s.t = "Testperson";
  animationData.layers[7].t.d.k[0].s.t = "";
  animationData = AnimationLinksBB;
  animationData.layers[1].t.d.k[0].s.t = "MAX";
  animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
  animationData.layers[5].t.d.k[0].s.t = "Testperson";
  animationData.layers[7].t.d.k[0].s.t = "";

}

function updateValues () {
  // animationData.layers[1].t.d.k[0].s.t = props.vorname;
  // animationData.layers[3].t.d.k[0].s.t = props.nachname;
  // animationData.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
  // animationData.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
}

onMounted(() => {
  setMaxMustermann();
});
</script>
<template>
  <h2 v-if="BBUnselected">
    Bitte eine Position für<br />
    die Bauchbinde auswählen
  </h2>
  <div class="animation" v-if="showAnimation" :key="lottie">
    <LottieAnimation ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
      @loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart"
      @stopped="stopped" />
  </div>
</template>

<style>
.animation {
  background-color: #000;
}

.hinweis {
  text-align: center;
  margin: auto;
}

@media screen and (max-width: 1200px) {
  .animation {
    width: 80%;
  }
}
</style>