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

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

export function CourseContentForm() {
	const {
		register,
		formState: { errors },
		watch,
		handleSubmit,
	} = useFormContext<CourseFormData>();
	// useEffect(() => {
	// 	console.log(watch("audiences"));
	// }, [watch("audiences")]);
	return (
		<form className="max-w-2xl mx-auto space-y-6 p-6">
			<FormInput
				maxLength={20}
				name="title"
				label="课程标题"
				placeholder="请输入课程标题"
			/>
			<FormInput
				maxLength={10}
				name="subTitle"
				label="课程副标题"
				placeholder="请输入课程副标题"
			/>
			<FormInput
				name="description"
				label="课程描述"
				type="textarea"
				placeholder="请输入课程描述"
			/>
			<FormSelect
				name="level"
				label="难度等级"
				options={convertToOptions(CourseLevelLabel)}></FormSelect>
			{/* <FormArrayField inputProps={{ maxLength: 10 }} name='requirements' label='课程要求'></FormArrayField> */}
		</form>
	);
}
