<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 :user="user" @update:user="userUpdated" />
      </div>
    </q-card-section>
    <MainUserSettings :user="user" @update:user="updateUser" />
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from '../../../store';
import UserSelector from '../components/UserSelector.vue';
import MainUserSettings from '../components/settings/MainUserSettings.vue';

export default defineComponent({
  name: 'UpdateUser',
  components: { UserSelector, MainUserSettings },
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const user = ref(<FG.User>store.state.user.currentUser);

    // can be dropped with VUE3
    const userUpdated = (value: FG.User) => {
      user.value = value;
      console.log(value);
    };

    function updateUser(value: FG.User) {
      store.dispatch('user/updateUser', value).catch(error => {
        console.warn(error);
      });
    }

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

<style scoped></style>
