import type {IAvatarUploadResponse,} from "~/types";
import {UPLOAD_AVATAR} from "~/graphql/mutations/user";
import {isGraphQLError} from "~/utils/error";
import {useNotification} from "~/composables/notification";

export function useAvatarUpload() {
  const { t } = useI18n();
  const userStore = useUserStore();
  const { mutate, onDone, loading, error } = useMutation<IAvatarUploadResponse>(UPLOAD_AVATAR, {
    context: {
      hasUpload: true
    }}
  );

  async function uploadAvatar(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    await mutate({ avatar: file });
  }

  onDone(({ data }) => {
    const user = data?.uploadAvatar.user;
    if (user) {
      userStore.setUser(user);
      useNotification({
        message: t('popup.success.avatarUpload'),
        type: 'success'
      });
    }
  });

  watch(error, (err) => {
    if (!err) return;
    console.error('useAvatarUpload error:', err);
    let message = t('popup.errors.defaultError');
    if (isGraphQLError(err)) {
      message = err.graphQLErrors?.[0]?.message || message;
    } else {
      message = err.message;
    }
    useNotification({
      message,
      type: 'error',
      title: t('popup.errors.main')
    });
  });

  return {
    uploadAvatar
  };
}