<template>
  <div class="row justify-center items-center content-center q-pa-md">
    <q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>Servereinstellung</q-toolbar-title>
      </q-toolbar>
      <q-card-section>
        <q-form class="q-gutter-md" @submit="changeUrl">
          <q-input v-model="server" filled label="Server" dense />
          <q-btn dense color="primary" label="Speichern" type="submit" />
        </q-form>
      </q-card-section>
    </q-card>
  </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { notEmpty, PersistentStorage } from '@flaschengeist/api';
import { defineComponent, ref } from 'vue';
import { api } from 'boot/axios';

export default defineComponent({
  name: 'PageBackend',
  setup() {
    const router = useRouter();

    const server = ref(api.defaults.baseURL);

    function changeUrl() {
      if (server.value) {
        void PersistentStorage.set('baseURL', server.value).then(() => {
          console.log('uiuiui');
          void router.push({ name: 'login' }).then(() => router.go(0));
        });
      }
    }

    return {
      changeUrl,
      notEmpty,
      server,
    };
  },
});
</script>
