<template>
  <BaseSetting title="Login-Session Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
    <div class="w-full">
      <label for="jwt_expiration">JWT-Gültigkeitsdauer (optional)</label>
      <input
        id="jwt_expiration"
        type="text"
        :readonly="!enableEdit"
        :value="sessionSettings['session.jwt_expiration']"
      />
    </div>
    <div class="w-full">
      <label for="refresh_expiration">Session-Gültigkeitsdauer (optional)</label>
      <input
        id="refresh_expiration"
        type="text"
        :readonly="!enableEdit"
        :value="sessionSettings['session.refresh_expiration']"
      />
    </div>
    <div class="w-full">
      <label for="pwa_refresh_expiration">Sesion-Gültigkeitsdauer PWA (optional)</label>
      <input
        id="pwa_refresh_expiration"
        type="text"
        :readonly="!enableEdit"
        :value="sessionSettings['session.pwa_refresh_expiration']"
      /></div
  ></BaseSetting>
</template>

<script setup lang="ts">
import { useAbilityStore } from "@/stores/ability";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import BaseSetting from "./BaseSetting.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      enableEdit: false as boolean,
      status: undefined as undefined | "loading" | "success" | "failed",
    };
  },
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    ...mapState(useAbilityStore, ["can"]),
    sessionSettings() {
      return this.readByTopic("session");
    },
  },
  methods: {
    ...mapActions(useSettingStore, ["updateSettings"]),
    submit(e: any) {
      const formData = e.target.elements;
      return this.updateSettings([
        {
          key: "session.jwt_expiration",
          value: formData.jwt_expiration.value || null,
        },
        {
          key: "session.refresh_expiration",
          value: formData.refresh_expiration.value || null,
        },
        {
          key: "session.pwa_refresh_expiration",
          value: formData.pwa_refresh_expiration.value || null,
        },
      ]);
    },
  },
});
</script>
