import { Course, TaxonomySlug } from "@nice/common";
import React, { useContext, useMemo } from "react";
import { Image, Typography, Skeleton, Tag } from "antd"; // 引入 antd 组件
import { CourseDetailContext } from "./CourseDetailContext";
import { useNavigate, useParams } from "react-router-dom";
import { useStaff } from "@nice/client";
import { useAuth } from "@web/src/providers/auth-provider";
import TermInfo from "@web/src/app/main/path/components/TermInfo";
import { PictureOutlined } from "@ant-design/icons";

export const CourseDetailDescription: React.FC = () => {
	const {
		course,
		canEdit,
		isLoading,
		selectedLectureId,
		setSelectedLectureId,
		userIsLearning,
		lecture = null,
	} = useContext(CourseDetailContext);
	const { Paragraph } = Typography;
	const { user } = useAuth();
	const { update } = useStaff();
	const firstLectureId = useMemo(() => {
		return course?.sections?.[0]?.lectures?.[0]?.id;
	}, [course]);
	const navigate = useNavigate();
	const { id } = useParams();
	return (
		// <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
		<div className="w-full   px-5 my-2">
			{isLoading || !course ? (
				<Skeleton active paragraph={{ rows: 4 }} />
			) : (
				<div className="space-y-2">
					{!selectedLectureId && (
						<div className="relative mb-4 overflow-hidden flex justify-center items-center">
							{
								<Image
									src={course.meta.thumbnail}
									preview={false}
									className="w-full h-full object-cover z-0"
									fallback="/placeholder.webp"
								/>
							}
							<div
								onClick={async () => {
									setSelectedLectureId(firstLectureId);
									if (!userIsLearning) {
										await update.mutateAsync({
											where: { id: user?.id },
											data: {
												learningPosts: {
													connect: {
														id: course.id,
													},
												},
											},
										});
									}
								}}
								className="w-full h-full absolute top-0 z-10 bg-[rgba(0,0,0,0.3)] transition-all duration-300 ease-in-out hover:bg-[rgba(0,0,0,0.7)] cursor-pointer group">
								<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
									点击进入学习
								</div>
							</div>
						</div>
					)}
					<div className="text-lg font-bold">{"课程简介:"}</div>
					<div className="flex flex-col gap-2">
						<div className="flex gap-2 flex-wrap items-center float-start">
							{course?.subTitle && <div>{course?.subTitle}</div>}
							<TermInfo post={course}></TermInfo>
						</div>
					</div>
					<Paragraph
						className="text-gray-600"
						ellipsis={{
							rows: 3,
							expandable: true,
							symbol: "展开",
							onExpand: () => console.log("展开"),
						}}>
						{course?.content}
					</Paragraph>
				</div>
			)}
		</div>
	);
};