import { PostDto, VisitType } from "@nice/common";
import { useVisitor } from "@nice/client";
import { Button, Tooltip } from "antd";
import { DislikeFilled, DislikeOutlined } from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";

export default function PostHateButton({ post }: { post: PostDto }) {
	const { user } = useAuth();
	const { hate, unHate } = useVisitor();
	function hateThisPost() {
		if (!post?.hated) {
			post.hates += 1;
			post.hated = true;
			hate.mutateAsync({
				data: {
					visitorId: user?.id || null,
					postId: post.id,
					type: VisitType.HATE,
				},
			});
		} else {
			post.hates -= 1;
			post.hated = false;
			unHate.mutateAsync({
				where: {
					visitorId: user?.id || null,
					postId: post.id,
					type: VisitType.HATE,
				},
			});
		}
	}
	return (
		<Button
			title={post?.hated ? "取消点踩" : "点踩"}
			type={post?.hated ? "primary" : "default"}
			style={{
				backgroundColor: post?.hated ? "#ff4d4f" : "#fff",
				borderColor: post?.hated ? "transparent" : "",
				color: post?.hated ? "#fff" : "#000",
				boxShadow: "none", // 去除阴影
			}}
			shape="round"
			icon={post?.hated ? <DislikeFilled /> : <DislikeOutlined />}
			onClick={(e) => {
				e.stopPropagation();
				hateThisPost();
			}}>
			<span className="mr-1">不满意</span>
			{post?.hates || 0}
		</Button>
	);
}
