<template>
  <user-block
    :user
    title="user_edit__title_card"
    btnText="user_edit__btn"
    @update="updateUser"
  />
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import userBlock from 'components/userBlock.vue'
  import { useUsersStore } from 'stores/users'
  import { parseIntString } from 'utils/helpers'
  import type { User } from 'types/User'

  const router = useRouter()
  const route = useRoute()
  const usersStore = useUsersStore()

  const userId = computed(() => parseIntString(route.params.userId))

  const user = userId.value && usersStore.userById(userId.value) || {} as User

  async function updateUser (user: User) {
    if (!userId .value || !user) return
    await usersStore.update(userId.value, user)
    router.go(-1)
  }

</script>
