<template>
  <form class="flex flex-col gap-2" @submit.prevent="setup">
    <p class="text-center">Feuerwehr-/Vereinsdaten</p>
    <div class="-space-y-px">
      <div>
        <input
          id="name"
          name="name"
          type="text"
          placeholder="Feuerwehr-/Vereinsname (optional)"
          class="rounded-b-none!"
        />
      </div>

      <div>
        <input
          id="imprint"
          name="imprint"
          type="url"
          placeholder="Link zum Impressum (optional)"
          class="rounded-none!"
        />
      </div>

      <div>
        <input
          id="privacy"
          name="privacy"
          type="url"
          placeholder="Link zur Datenschutzerklärung (optional)"
          class="rounded-none!"
        />
      </div>

      <div>
        <input
          id="website"
          name="website"
          type="url"
          placeholder="Link zur Webseite (optional)"
          class="rounded-t-none!"
        />
      </div>
    </div>

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

    <div class="flex flex-row gap-2">
      <button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
        Vereinsdaten 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, ["setClub", "skip"]),
    setup(e: any) {
      let formData = e.target.elements;
      this.setupStatus = "loading";
      this.setupMessage = "";
      this.setClub({
        name: formData.name.value,
        imprint: formData.imprint.value,
        privacy: formData.privacy.value,
        website: formData.website.value,
      })
        .then((result) => {
          // this.setupStatus = "success";
        })
        .catch((err) => {
          this.setupStatus = "failed";
          this.setupMessage = err.response.data;
        });
    },
  },
});
</script>
