import { GET_POST_BY_SLUG } from '@graphql/queries/standalone/blog';
import type { IPostResponse } from '@types';

export async function usePostBySlug(slug: string) {
	const { locale } = useI18n();

	const variables = reactive({
		slug: slug,
		first: 1,
	});

	const { data, pending, error, refresh } = await useAsyncQuery<IPostResponse>(GET_POST_BY_SLUG, variables);

	const post = computed(() => data.value?.posts.edges[0]?.node ?? null);

	watch(locale, async () => {
		if (variables.first >= 100) {
			variables.first = 0;
		} else {
			variables.first += 1;
		}
		await refresh();
	});

	watch(error, (err) => {
		if (err) {
			console.error('usePostBySlug error:', err);
		}
	});

	return {
		post,
		pending,
		refresh,
	};
}