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";
import AvatarUploader from "@web/src/components/common/uploader/AvatarUploader";
import DepartmentSelect from "../../../department/department-select";

const { TextArea } = Input;

export function CourseBasicForm() {
	// 将 CourseLevelLabel 使用 Object.entries 将 CourseLevelLabel 对象转换为键值对数组。
	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: 20, message: "副标题最多20个字符" }]}>
				<Input placeholder="请输入课程副标题" />
			</Form.Item>
			<Form.Item name={["meta", "thumbnail"]} label="课程封面">
				<AvatarUploader
					style={{
						width: "192px",
						height: "108px",
						margin: " 0 10px",
					}}></AvatarUploader>
			</Form.Item>
			<Form.Item name="content" label="课程描述">
				<TextArea
					placeholder="请输入课程描述"
					autoSize={{ minRows: 3, maxRows: 6 }}
				/>
			</Form.Item>
			<Form.Item name="deptIds" label="参与单位">
				<DepartmentSelect multiple />
			</Form.Item>
			{taxonomies &&
				taxonomies.map((tax, index) => (
					<Form.Item
						rules={[
							{
								required: false,
								message: "",
							},
						]}
						label={tax.name}
						name={tax.id}
						key={index}>
						<TermSelect
							placeholder={`请选择${tax.name}`}
							taxonomyId={tax.id}></TermSelect>
					</Form.Item>
				))}
		</div>
	);
}
