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

import { CourseFormData, useCourseEditor } from './CourseEditorContext';
import { CourseLevel, CourseLevelLabel } from '@nicestack/common';
import { FormInput } from '@web/src/components/presentation/form/FormInput';
import { FormSelect } from '@web/src/components/presentation/form/FormSelect';
import { FormArrayField } from '@web/src/components/presentation/form/FormArrayField';
import { convertToOptions } from '@nicestack/client';

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 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>
    );
}