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 {
	BookOutlined,
	CalendarOutlined,
	EditTwoTone,
	EyeOutlined,
	PlayCircleOutlined,
	ReloadOutlined,
	TeamOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { useNavigate, useParams } from "react-router-dom";

export const CourseDetailDescription: React.FC = () => {
	const { course, isLoading, selectedLectureId, setSelectedLectureId } =
		useContext(CourseDetailContext);
	const { Paragraph, Title } = Typography;
	const firstLectureId = useMemo(() => {
		return course?.sections?.[0]?.lectures?.[0]?.id;
	}, [course]);
	const navigate = useNavigate();
	const { canEdit } = useContext(CourseDetailContext);
	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-4">
			{isLoading || !course ? (
				<Skeleton active paragraph={{ rows: 4 }} />
			) : (
				<div className="space-y-2">
					{!selectedLectureId && course?.meta?.thumbnail && (
						<>
							<div className="relative  my-4 overflow-hidden flex justify-center items-center">
								<Image
									src={course?.meta?.thumbnail}
									preview={false}
									className="w-full h-full object-cover z-0"
								/>
								<div
									onClick={() => {
										setSelectedLectureId(firstLectureId);
									}}
									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">
									<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10">
										点击进入学习
									</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>}
							{course.terms.map((term) => {
								return (
									<Tag
										key={term.id}
										// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
										color={
											term?.taxonomy?.slug ===
											TaxonomySlug.CATEGORY
												? "blue"
												: term?.taxonomy?.slug ===
													  TaxonomySlug.LEVEL
													? "green"
													: "orange"
										}
										className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
										{term.name}
									</Tag>
								);
							})}
						</div>
						<div className="text-gray-600 flex justify-start gap-5">
							<div className="flex gap-1">
								<CalendarOutlined></CalendarOutlined>
								{"创建于:"}
								{dayjs(course?.createdAt).format(
									"YYYY年M月D日"
								)}
							</div>
							<div className="flex gap-1">
								<ReloadOutlined></ReloadOutlined>
								{"更新于:"}
								{dayjs(course?.updatedAt).format(
									"YYYY年M月D日"
								)}
							</div>
							<div className="flex gap-1">
								<EyeOutlined></EyeOutlined>
								<div>{`观看次数${course?.meta?.views || 0}`}</div>
							</div>
							<div className="flex gap-1">
								<BookOutlined />
								<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
							</div>
							{canEdit && (
								<div
									className="flex gap-1 text-primary hover:cursor-pointer"
									onClick={() => {
										const url = id
											? `/course/${id}/editor`
											: "/course/editor";
										navigate(url);
									}}>
									<EditTwoTone></EditTwoTone>
									{"点击编辑课程"}
								</div>
							)}
						</div>
					</div>
					<Paragraph
						className="text-gray-600"
						ellipsis={{
							rows: 3,
							expandable: true,
							symbol: "展开",
							onExpand: () => console.log("展开"),
						}}>
						{course?.content}
					</Paragraph>
				</div>
			)}
		</div>
	);
};