<script setup lang="ts">
const emit = defineEmits(["playLottie", "pauseLottie"]);
const vorname = defineModel("vorname");
const nachname = defineModel("nachname");
const funktionZeileEins = defineModel("funktionZeileEins");
const funktionZeileZwei = defineModel("funktionZeileZwei");
const BBEcke = defineModel("BBEcke");
import jsonDraft from "../assets/boilerplate.json";

function startAnimation() {
  emit("playLottie", true);
  emit("pauseLottie", false);
}

function pauseAnimation() {
  emit("pauseLottie", true);
  emit("playLottie", false);
}

function sendJson() {
  jsonDraft.metadata[1].value = String(`BB${BBEcke.value}`);
  jsonDraft.metadata[2].value = String(vorname.value);
  jsonDraft.metadata[3].value = String(nachname.value);
  jsonDraft.metadata[4].value = String(funktionZeileEins.value);
  jsonDraft.metadata[5].value = String(funktionZeileZwei.value);
  let outputPath = `G:/VPMS/00-Temp_Austausch/von_Helmut/Schwertgen, David/Bauchbinde_${nachname.value}.mp4`;
  jsonDraft.metadata[6].value = String(outputPath);
  //download(JSON.stringify(jsonDraft), `test.json`, "text/plain");
  // write a post request to submit the json to the backend
  const token =
    "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJkczAzMSIsImlwQWRkcmVzcyI6IjE3Mi4xNi43OC4xMzMiLCJpc3MiOiJodHRwczovL2hlbG11dC5yYmItb25saW5lLmRlIiwidXNlcnJvbGUiOiJBRE1JTiIsImlhdCI6MTY4NTE5NTczMCwidXNlcm5hbWUiOiJkczAzMSJ9.TYMYcg1NzCtQuRJCborwPjc1p__e32Ecmtx55I9MdFZ3Ct88TWbH7A48OzsUNeMDYCLLB0R3O21LxYqno1pMRw";

  fetch("https://helmut.rbb-online.de/v1/io/jobs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(jsonDraft),
  })
    .then((response) => {
      // Handle the response
      console.log(response);
    })
    .catch((error) => {
      // Handle any errors
      console.error(error);
    });
}
</script>

<template>
  <div class="form">
    <h2 class="title">rbb24 Reportage Bauchbinde</h2>
    <div class="container">
      <label>Postion der Bauchbinde </label>
      <div class="row">
        <select id="bauchbindeEcke" v-model="BBEcke">
          <option value="rechts" selected>rechts</option>
          <option value="links">links</option>
        </select>
      </div>
      <label>Vorname </label>
      <div class="row">
        <input class="inputField" type="text" v-model="vorname" />
      </div>
      <label>Nachname </label>
      <div class="row">
        <input class="inputField" type="text" v-model="nachname" />
      </div>
      <label>Funktion 1. Zeile </label>
      <div class="row">
        <input class="inputField" type="text" v-model="funktionZeileEins" />
      </div>
      <label>Funktion 2. Zeile </label>
      <div class="row">
        <input class="inputField" type="text" v-model="funktionZeileZwei" />
      </div>
      <div class="row">
        <button class="playLottie-btn" @click="startAnimation">
          Animation starten
        </button>
        <button class="pauseLottie-btn" @click="pauseAnimation">
          Animation Pausieren
        </button>
      </div>
      <div class="row">
        <button class="jsonGenerate-btn" @click="sendJson">
          Animation erzeugen
        </button>
      </div>
    </div>
  </div>
</template>

<style>
.row {
  margin-bottom: 1em;
  width: 20em;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.example {
  border: 1px solid #fff;
  height: 25px;
}

#app {
  text-align: unset !important;
}

#bauchbindeEcke {
  width: 100%;
}

.playLottie-btn {
  color: white;
  font-size: 16px;
  background-color: #699b32;
  font-weight: bold;
  float: left;
}

.playLottie-btn:hover {
  background-color: white;
  color: #699b32;
  border: 1px solid #699b32;
}

.pauseLottie-btn {
  color: white;
  font-size: 16px;
  background-color: #e31818;
  font-weight: bold;
  float: right;
}

.pauseLottie-btn:hover {
  background-color: white;
  color: #e31818;
  border: 1px solid #e31818;
}

.jsonGenerate-btn {
  color: white;
  font-size: 16px;
  background-color: #266ca3;
  font-weight: bold;
  float: right;
}

.jsonGenerate-btn:hover {
  background-color: white;
  color: #266ca3;
  border: 1px solid #266ca3;
}
.inputField {
  width: 98%;
}

.title {
  color: #e31818;
  line-height: 0;
  padding-bottom: 15px;
}

.container {
  height: 75%;
}

.form {
  height: 115%;
  min-width: 400px;
}

@media screen and (max-width: 1200px) {
  .form {
    min-width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>