import { SubmitHandler, useFormContext } from "react-hook-form";

import { CourseFormData } from "../../context/CourseEditorContext";
import { CourseLevel, CourseLevelLabel } from "@nice/common";
import { convertToOptions } from "@nice/client";
import { FormDynamicInputs } from "@web/src/components/common/form/FormDynamicInputs";

export function CourseTargetForm() {
	const {
		register,
		formState: { errors },
		watch,
		handleSubmit,
	} = useFormContext<CourseFormData>();

	return (
		<form className="max-w-2xl mx-auto space-y-6 p-6">
			<FormDynamicInputs
				name="objectives"
				label="本课的具体学习目标是什么？"
				// subTitle="学员在完成您的课程后期望掌握的技能"
				addTitle="目标"></FormDynamicInputs>
			<FormDynamicInputs
				name="skills"
				label="学生将从您的课程中学到什么技能？"
				subTitle="学员在完成您的课程后期望掌握的技能"
				addTitle="技能"></FormDynamicInputs>
			<FormDynamicInputs
				name="requirements"
				label="参加课程的要求或基本要求是什么？"
				subTitle="列出学员在参加课程之前应具备的所需技能、经验、工具或设备。
如果没有要求，则可利用此空间作为降低初学者门槛的机会。"
				addTitle="要求"></FormDynamicInputs>
			<FormDynamicInputs
				name="audiences"
				subTitle="撰写您的课程目标学员的清晰描述，让学员了解您的课程内容很有价值。这将帮助您吸引合适的学员加入您的课程。"
				addTitle="目标受众"
				label="此课程的受众是谁？"></FormDynamicInputs>

			{/* <FormArrayField inputProps={{ maxLength: 10 }} name='requirements' label='课程要求'></FormArrayField> */}
		</form>
	);
}
