<template>
  <q-card class="col-12">
    <q-card-section class="fit row justify-start content-center items-center">
      <div class="col-xs-12 col-sm-6 text-center text-h6">Benutzereinstellungen</div>
      <div class="col-xs-12 col-sm-6 q-pa-sm">
        <UserSelector v-model="user" />
      </div>
    </q-card-section>
    <MainUserSettings :user="user" @update:user="updateUser" />
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import MainUserSettings from './settings/MainUserSettings.vue';
import UserSelector from './UserSelector.vue';
import { useMainStore, useUserStore } from '@flaschengeist/api';

export default defineComponent({
  name: 'UpdateUser',
  components: { UserSelector, MainUserSettings },
  setup() {
    const mainStore = useMainStore();
    const userStore = useUserStore();
    const user = ref(mainStore.currentUser);

    onMounted(() => {
      void userStore.getUsers(true)
    })

    async function updateUser(value: FG.User) {
      await userStore.updateUser(value);
      user.value = value;
    }

    return {
      user,
      updateUser,
    };
  },
});
</script>

<style scoped></style>