import { useContext } from "react";
import { useState, useRef, useEffect } from "react";
import { PostDetailContext } from "../context/PostDetailContext";
import { StatsSection } from "./StatsSection";
import PostResources from "../PostResources";

export default function Content() {
	const { post, user } = useContext(PostDetailContext);
	const [isExpanded, setIsExpanded] = useState(false);
	const contentWrapperRef = useRef(null);
	const [shouldCollapse, setShouldCollapse] = useState(false);
	console.log(post)
	useEffect(() => {
		if (contentWrapperRef.current) {
			const shouldCollapse = contentWrapperRef.current.scrollHeight > 150;
			setShouldCollapse(shouldCollapse);
		}
	}, [post?.content]);

	return (
		<div className="p-6 text-base " >
			<div className="text-secondary-700 flex flex-col gap-4 bg-slate-100 border border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out rounded-xl p-6 ">
				{/* 包装整个内容区域的容器 */}
				<div
					ref={contentWrapperRef}
					className={`duration-300 ${shouldCollapse && !isExpanded
						? `max-h-[150px] overflow-hidden relative`
						: ""
						}`}>
					{/* 内容区域 */}
					<div
						className="ql-editor p-0 space-y-1 leading-relaxed"
						dangerouslySetInnerHTML={{
							__html: post?.content || "",
						}}
					/>



					{/* 渐变遮罩 */}
					{shouldCollapse && !isExpanded && (
						<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
					)}
				</div>

				{/* 展开/收起按钮 */}
				{shouldCollapse && (
					<button
						onClick={() => setIsExpanded(!isExpanded)}
						className="mt-2 text-blue-500 hover:text-blue-700">
						{isExpanded ? "收起" : "展开"}
					</button>
				)}
				{/* PostResources 组件 */}
				<PostResources post={post} />
			</div>
			<StatsSection />
		</div>
	);
}
