<template>
  <photo-editor :url="avatar" @save="save" />
</template>

<script lang="ts">
import {defineComponent} from "vue";
import PhotoEditor from "~/components/photo-editor.vue";
import useUser from "~/store/user";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "avatar",
  components: {
    [PhotoEditor.name]: PhotoEditor
  },
  setup() {

    const {store, update} = useUser();
    const router = useRouter();
    let { meta, avatar_url } = store.current;
    let avatar = avatar_url ||  meta?.avatarUrl;

    const save = async (url: string) => {
      let user = store.userMeta, userApp = store.userAppMeta;
      await update(user, {...userApp, avatar_url: url})
      router.back();
    }

    return {
      avatar, save
    }
  }
})
</script>

<style scoped>

</style>
