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

import { CourseFormData, useCourseForm } from './CourseEditorContext';
import { CourseLevel } 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';

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={[
                { label: '入门', value: CourseLevel.BEGINNER },
                {
                    label: '中级', value: CourseLevel.INTERMEDIATE
                },
                {
                    label: '高级', value: CourseLevel.ADVANCED
                }
            ]}></FormSelect>
            {/* <FormArrayField inputProps={{ maxLength: 10 }} name='requirements' label='课程要求'></FormArrayField> */}
        </form>
    );
}