import { useContext, useEffect } from "react";
import { PostDetailContext } from "../context/PostDetailContext";
import PostCommentEditor from "../PostCommentEditor";
import PostCommentList from "../PostCommentList";
import { useVisitor } from "@nice/client";
import { VisitType } from "@nice/common";
import Header from "../PostHeader/Header";
import Content from "../PostHeader/Content";

export default function PostDetailLayout() {
	const { post, user } = useContext(PostDetailContext);
	const { read } = useVisitor();

	useEffect(() => {
		if (post) {
			read.mutateAsync({
				data: {
					visitorId: user?.id || null,
					postId: post.id,
					type: VisitType.READED,
				},
			});
		}
	}, [post]);
	return <>
		<Header></Header>
		<Content></Content>
		<PostCommentEditor></PostCommentEditor>
		<PostCommentList></PostCommentList>
	</>
}
