import { motion } from "framer-motion";
import { NavItem } from "@nice/client";
import { useCourseEditor } from "../context/CourseEditorContext";
import toast from "react-hot-toast";
interface CourseSidebarProps {
	id?: string | undefined;
	isHovered: boolean;
	setIsHovered: (value: boolean) => void;
	navItems: (NavItem & { isInitialized?: boolean; isCompleted?: boolean })[];
	selectedSection: number;
	onNavigate: (
		item: NavItem & { isInitialized?: boolean; isCompleted?: boolean },
		index: number
	) => void;
}

export default function CourseEditorSidebar({
	isHovered,
	setIsHovered,
	navItems,
	selectedSection,
	onNavigate,
}: CourseSidebarProps) {
	const { editId } = useCourseEditor();
	return (
		<motion.nav
			animate={{ width: "16rem" }}
			transition={{ type: "spring", stiffness: 300, damping: 40 }}
			className="fixed left-0 top-16 h-[calc(100vh-4rem)] bg-white border-r border-gray-200 shadow-lg overflow-x-hidden">
			<div className="p-4">
				{navItems.map((item, index) => (
					<button
						key={index}
						type="button"
						onClick={(e) => {
							if (!editId && !item.isInitialized) {
								e.preventDefault();
								toast.error("请先完成课程概述填写并保存"); // 提示信息
							} else {
								e.preventDefault();
								onNavigate(item, index);
							}
						}}
						className={`w-full flex ${!isHovered ? "justify-center" : "items-center"} px-5 py-2.5 mb-1 rounded-lg transition-all duration-200 ${
							selectedSection === index
								? "bg-blue-50 text-blue-600 shadow-sm"
								: "text-gray-600 hover:bg-gray-50"
						}`}>
						<span className="flex-shrink-0">{item.icon}</span>
						{
							<>
								<span className="ml-3 font-medium flex-1 truncate">
									{item.label}
								</span>
							</>
						}
					</button>
				))}
			</div>
		</motion.nav>
	);
}
