<template>
  <form class="flex flex-col gap-2" @submit.prevent="setup">
    <p class="text-center">App Konfiguration</p>
    <div class="-space-y-px">
      <div>
        <input id="login_message" name="login_message" type="text" placeholder="Nachricht unter Login (optional)" />
      </div>

      <div class="flex flex-row items-center gap-2 pt-1">
        <input type="checkbox" id="show_cal_link" checked />
        <label for="show_cal_link">Link zum Kalender anzeigen (optional)</label>
      </div>
    </div>

    <p class="text-primary cursor-pointer ml-auto" @click="skip('app')">überspringen</p>

    <div class="flex flex-row gap-2">
      <button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
        Anwendungsdaten speichern
      </button>
      <Spinner v-if="setupStatus == 'loading'" class="my-auto" />
      <SuccessCheckmark v-else-if="setupStatus == 'success'" />
      <FailureXMark v-else-if="setupStatus == 'failed'" />
    </div>
    <p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
  </form>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { mapActions } from "pinia";
import { useSetupStore } from "../../stores/setup";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      setupStatus: undefined as undefined | "loading" | "success" | "failed",
      setupMessage: "" as string,
    };
  },
  methods: {
    ...mapActions(useSetupStore, ["setApp", "skip"]),
    setup(e: any) {
      let formData = e.target.elements;
      this.setupStatus = "loading";
      this.setupMessage = "";
      this.setApp({
        login_message: formData.login_message.value,
        show_cal_link: formData.show_cal_link.checked,
      })
        .then((result) => {
          // this.setupStatus = "success";
        })
        .catch((err) => {
          this.setupStatus = "failed";
          this.setupMessage = err.response.data;
        });
    },
  },
});
</script>