import { Box, Flex, ScrollArea, Separator, Text } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import { Interweave } from "interweave";
import { useAtomValue } from "jotai";
import { useParams } from "react-router-dom";
import { axiosLocalhost } from "../../api/axios/axios";
import { userAtom } from "../../AtomStore/AtomStore";
import AddPostToBlogDialog from "../Dialogs/AddPostToBlogDialog/AddPostToBlogDialog";
import ChangePostButton from "./ChangePostButton/ChangePostButton";
import SkeletonPostLoader from "./SkeletonLoader/SkeletonLoader";
import VoteButton, { DOWNVOTE, UPVOTE } from "./VoteButton/VoteButton";
import VoteCounter from "./VoteCounter/VoteCounter";

type TArticleViewer = {
    htmlToParse?: string;
};

export default function ArticleViewer(props: TArticleViewer) {
    let queryParams = useParams();
    const user = useAtomValue(userAtom);

    const { data, isPending } = useQuery({
        queryKey: [`post_${queryParams["postId"]}`],
        queryFn: async () => {
            const response = await axiosLocalhost.get(
                `posts/${queryParams["postId"]}`
            );

            return response.data;
        },
        gcTime: 0,
        refetchOnMount: true,
    });

    if (isPending) return <SkeletonPostLoader />;

    return (
            <ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width ">
                <Flex direction={"column"} className="overflow-hidden">
                    <Text className="mb-2" as="div" size={"9"}>
                        {data.title}
                    </Text>
                    <Flex
                        gap={"3"}
                        className="items-center mt-4 mb-2 overflow-hidden align-baseline"
                    >
                        <Flex gap={"1"}>
                            <VoteButton
                                vote={UPVOTE}
                                postId={queryParams["postId"] || ""}
                            />

                            <VoteCounter postId={queryParams["postId"] || ""} />

                            <VoteButton
                                vote={DOWNVOTE}
                                postId={queryParams["postId"] || ""}
                            />
                        </Flex>

                        <Box hidden={data.user_id != user?.id}>
                            <ChangePostButton
                                postId={queryParams["postId"] || ""}
                            />
                        </Box>

                        {user ? <AddPostToBlogDialog /> : null}
                    </Flex>
                </Flex>

                <Separator size={"4"} className="my-2" />

                <Interweave content={data.content} />
            </ScrollArea>
    );
}
