import { Form, Input, Select } from "antd";
import { CourseLevel, CourseLevelLabel } from "@nice/common";
import { convertToOptions } from "@nice/client";
import TermSelect from "../../../term/term-select";
import { useCourseEditor } from "../context/CourseEditorContext";

const { TextArea } = Input;

export function CourseBasicForm() {
	// 将 CourseLevelLabel 转换为 Ant Design Select 需要的选项格式
	const levelOptions = Object.entries(CourseLevelLabel).map(
		([key, value]) => ({
			label: value,
			value: key as CourseLevel,
		})
	);
	const { form, taxonomies } = useCourseEditor();
	return (
		<div className="max-w-2xl mx-auto space-y-6 p-6">
			<Form.Item
				name="title"
				label="课程标题"
				rules={[
					{ required: true, message: "请输入课程标题" },
					{ max: 20, message: "标题最多20个字符" },
				]}>
				<Input placeholder="请输入课程标题" />
			</Form.Item>

			<Form.Item
				name="subTitle"
				label="课程副标题"
				rules={[{ max: 10, message: "副标题最多10个字符" }]}>
				<Input placeholder="请输入课程副标题" />
			</Form.Item>

			<Form.Item name="content" label="课程描述">
				<TextArea
					placeholder="请输入课程描述"
					autoSize={{ minRows: 3, maxRows: 6 }}
				/>
			</Form.Item>
			{taxonomies &&
				taxonomies.map((tax, index) => (
					<Form.Item
						rules={[
							{
								required: false,
								message: "",
							},
						]}
						label={tax.name}
						name={tax.name}
						key={index}>
						<TermSelect taxonomyId={tax.id}></TermSelect>
					</Form.Item>
				))}
			{/* <Form.Item name="level" label="难度等级">
				<Select placeholder="请选择难度等级" options={levelOptions} />
			</Form.Item> */}
		</div>
	);
}
