<template>
  <div class="relative w-full md:max-w-md">
    <div class="flex flex-col items-center">
      <p class="text-xl font-medium">Webapi-Token</p>
    </div>
    <br />
    <div class="flex flex-col gap-2">
      <TextCopy :copyText="token" />
    </div>

    <div class="flex flex-row justify-end">
      <div class="flex flex-row gap-4 py-2">
        <button primary-outline @click="closeModal">schließen</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { RouterLink } from "vue-router";
import { useModalStore } from "@/stores/modal";
import { useCalendarTypeStore } from "@/stores/admin/configuration/calendarType";
import type { CalendarTypeViewModel } from "@/viewmodels/admin/configuration/calendarType.models";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import TextCopy from "@/components/TextCopy.vue";
import { CalendarDaysIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
import { host } from "@/serverCom";
import { useWebapiStore } from "../../../../stores/admin/management/webapi";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      token: "" as string,
    };
  },
  computed: {
    ...mapState(useModalStore, ["data"]),
  },
  mounted() {
    this.fetchWebapiTokenById(this.data)
      .then((res) => {
        this.token = res.data;
      })
      .catch(() => {});
  },
  methods: {
    ...mapActions(useModalStore, ["closeModal"]),
    ...mapActions(useWebapiStore, ["fetchWebapiTokenById"]),
  },
});
</script>
