import { SubmitHandler, useFormContext } from 'react-hook-form';
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 { FormArrayField } from '@web/src/components/common/form/FormArrayField';
import { convertToOptions } from '@nice/client';
import { CourseFormData } from '../context/CourseEditorContext';
import QuillEditor from '@web/src/components/common/editor/quill/QuillEditor';
import { FormQuillInput } from '@web/src/components/common/form/FormQuillInput';

export function CourseBasicForm() {
    const { register, formState: { errors }, watch, handleSubmit } = useFormContext<CourseFormData>();
    return (
        <form className="max-w-2xl mx-auto space-y-6 p-6">
            <FormInput viewMode maxLength={20} name="title" label="课程标题" placeholder="请输入课程标题" />
            <FormInput maxLength={10} name="subTitle" label="课程副标题" placeholder="请输入课程副标题" />
            <FormQuillInput maxLength={400} name="description" label="课程描述" placeholder="请输入课程描述"></FormQuillInput>

            <FormSelect name='level' label='难度等级' options={convertToOptions(CourseLevelLabel)}></FormSelect>

        </form>
    );
}

