import { PostDto, VisitType } from "@nice/common";
import { motion } from "framer-motion";
import dayjs from "dayjs";

import { Avatar } from "antd";
import { useVisitor } from "@nice/client";
import { useContext, useEffect, useRef, useState } from "react";
import { PostDetailContext } from "./context/PostDetailContext";
import {
	CheckCircleOutlined,
	CheckOutlined,
	LikeFilled,
	LikeOutlined,
} from "@ant-design/icons";
import PostLikeButton from "./PostHeader/PostLikeButton";
import { CustomAvatar } from "@web/src/components/presentation/CustomAvatar";
import PostResources from "./PostResources";
import PostHateButton from "./PostHeader/PostHateButton";
import PostSendButton from "./PostHeader/PostSendButton";
import { getCompressedImageUrl } from "@nice/utils";

export default function PostCommentCard({
	post,
	index,
	isReceiverComment,
}: {
	post: PostDto;
	index: number;
	isReceiverComment: boolean;
}) {
	return (
		<motion.div
			className={` rounded-xl  border p-6 bg-slate-100 border-white  ring-white hover:ring-1 transition-all duration-300 ease-in-out`}
			layout>
			<div className="flex items-start space-x-2 gap-2">
				<div className="flex-shrink-0">
					<a href={post.author?.meta?.photoUrl}>
						{/* {post.author?.meta?.photoUrl} */}
					</a>
					<CustomAvatar
						src={post.author?.meta?.photoUrl}
						size={50}
						name={
							!post.author?.meta?.photoUrl &&
							post.author?.showname
						}
						randomString={
							post?.meta?.signature || post?.meta?.ip
						}></CustomAvatar>
				</div>
				<div className="flex-1">
					<div className={`flex-1 min-w-0  `}>
						<div className="flex flex-1 justify-between ">
							<div className="flex items-center  space-x-2">
								<span className="flex  font-medium text-slate-900">
									{post?.meta?.signature ||
										post.author?.showname ||
										"匿名用户"}
								</span>
								<span className="flex  text-sm text-slate-500 ">
									{dayjs(post?.createdAt).format(
										"YYYY-MM-DD HH:mm"
									)}
								</span>
								{isReceiverComment && (
									<span className="  text-sm text-primary flex gap-2 font-bold">
										<CheckOutlined></CheckOutlined>
										官方回复
									</span>
								)}
							</div>
							{/* 添加有帮助按钮 */}
							<div>
								<div className="flex justify-center items-center  gap-2">
									{isReceiverComment && (
										<PostSendButton
											post={post}></PostSendButton>
									)}
									<PostHateButton
										post={post}></PostHateButton>
									<PostLikeButton
										post={post}></PostLikeButton>
									<span className=" text-sm text-slate-500">{`#${index + 1}`}</span>
								</div>
							</div>
						</div>

						<div
							className="ql-editor text-slate-800 mt-1 text-base mb-2"
							style={{
								padding: 0,
							}}
							dangerouslySetInnerHTML={{
								__html: post.content || "",
							}}
						/>
						<PostResources post={post}></PostResources>
					</div>
				</div>
			</div>
		</motion.div>
	);
}