// imports

import { useQuery } from "@tanstack/vue-query";
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
import sanitizeHtml from 'sanitize-html';

// types

export type GetArticleResponse = Article;

const useGetArticle = (id: number | string | undefined) => {

    // state

    const { $axios: axios } = useNuxtApp();

    // methods

    const handleGetArticle = async () => {
        const { data } = await axios.get<GetArticleResponse>(`${API_ENDPOINTS.blog.article}/${id}`);
        return data;
    };

    return useQuery({
        queryKey: [QUERY_KEYS.article, id],
        queryFn: () => handleGetArticle(),
        select: (article) => {
            const copyOfArticle = { ...article };

            copyOfArticle.summery = sanitizeHtml(copyOfArticle.summery);
            copyOfArticle.content = sanitizeHtml(copyOfArticle.content);

            return copyOfArticle;
        }
    });
};

export default useGetArticle;