import { createSignal } from "solid-js";
import { FilledCard } from "../components/FilledCard";
import { ClassroomRegistrationPreview } from "./ClassroomRegistrationPreview";
import { ClassroomSearchableSelect } from "./ClassroomSearchableSelect";
import { ClassroomCourseValue } from "../types/ClassroomCourse";

export function ClassroomRegistration(props: {
    surname_first_letter: string, userId: number | null,
    onSuccess: () => void,
}) {
    const [selections, setSelections] = createSignal<Set<ClassroomCourseValue>>(new Set());

    return (
        <div class="h-screen overflow-y-scroll">
            <FilledCard class="border border-c-outline overflow-hidden">
                <h2 class="p-3 font-bold text-xl">Inscribir en Aula Virtual</h2>

                <div class="bg-c-surface p-4 h-[17rem]">
                    <ManualClassroomRegistration
                        onAdd={(x) => setSelections((s) => new Set([...s, x]))}
                    />
                </div>
            </FilledCard>

            <ClassroomRegistrationPreview
                surname_first_letter={props.surname_first_letter}
                userId={props.userId}
                selections={selections()}
                deleteRegister={(course_key) => {
                    setSelections((prevSet) => {
                        prevSet.delete(course_key as ClassroomCourseValue);
                        return new Set(prevSet);
                    });
                }}
                onSuccess={() => {
                    setSelections(new Set<ClassroomCourseValue>());
                    props.onSuccess();
                }}
            />
        </div>
    );
}


function ManualClassroomRegistration(props: {onAdd: (k: ClassroomCourseValue) => void}) {
    return (
        <form>
            <ClassroomSearchableSelect
                onAdd={props.onAdd}
            />
        </form>
    );
}
