import { ArrowLeftOutlined, ClockCircleOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { Button, Modal, Tag, Typography } from "antd";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { CourseStatus, CourseStatusLabel } from "@nice/common";
import { useCourseEditor } from "../context/CourseEditorContext";
import { useAuth } from "@web/src/providers/auth-provider";
import toast from "react-hot-toast";

const { Title } = Typography;

const courseStatusVariant: Record<CourseStatus, string> = {
	[CourseStatus.DRAFT]: "default",
	[CourseStatus.UNDER_REVIEW]: "warning",
	[CourseStatus.PUBLISHED]: "success",
	[CourseStatus.ARCHIVED]: "error",
};

export default function CourseEditorHeader() {
	const navigate = useNavigate();
	const { user, hasSomePermissions } = useAuth();
	const { confirm } = Modal;
	const { onSubmit, course, form, handleDeleteCourse, editId } = useCourseEditor();

	const handleSave = () => {
		try {
			form.validateFields().then((values) => {
				onSubmit(values);
			});
		} catch (err) {
			console.log(err);
		}
	};
	const showDeleteConfirm = () => {
		confirm({
			title: '确定删除该课程吗',
			icon: <ExclamationCircleFilled />,
			content: '',
			okText: '删除',
			okType: 'danger',
			cancelText: '取消',
			async onOk() {
				console.log('OK');
				console.log(editId)
				await handleDeleteCourse()
				toast.success('课程已删除')
				navigate("/courses");
			},
			onCancel() {
				console.log('Cancel');
			},
		});
	};
	return (
		<header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-10">
			<div className="h-full flex items-center justify-between px-3 md:px-4">
				<div className="flex items-center space-x-3">
					<Button
						icon={<ArrowLeftOutlined />}
						onClick={() => {
							if (course?.id) {
								navigate(`/course/${course?.id}/detail`);
							} else {
								navigate("/");
							}
						}}
						type="text"
					/>
					<div className="flex items-center space-x-2">
						<Title level={4} style={{ margin: 0 }}>
							{course?.title || "新建课程"}
						</Title>
						{/* <Tag
							color={
								courseStatusVariant[
									course?.state || CourseStatus.DRAFT
								]
							}>
							{course?.state
								? CourseStatusLabel[course.state]
								: CourseStatusLabel[CourseStatus.DRAFT]}
						</Tag> */}
						{/* {course?.duration && (
							<span className="hidden md:flex items-center text-gray-500 text-sm">
								<ClockCircleOutlined
									style={{ marginRight: 4 }}
								/>
								总时长 {course.duration}
							</span>
						)} */}
					</div>
				</div>
				<div>
					{editId &&
						<Button
							danger
							onClick={showDeleteConfirm}
						>
							删除课程
						</Button>
					}
					<Button
						className="ml-4"
						type="primary"
						// size="small"
						onClick={handleSave}
					// disabled={form
					// 	.getFieldsError()
					// 	.some(({ errors }) => errors.length)}
					>
						保存
					</Button>
				</div>
			</div>
		</header>
	);
}
