import { Show, createSignal } from "solid-js";
import { Search } from "../certs/Search";
import { Person } from "../types/Person";
import { FilledCard } from "../components/FilledCard";
import { ClassroomUserCreation } from "./ClassroomUserCreation";
import { ClassroomVinculation } from "./ClassroomVinculation";
import { ClassroomUserCourses } from "./ClassroomUserCourses";
import { ClassroomRegistration } from "./ClassroomRegistration";

type TabType = "Vinculate" | "Create";

export function OnlineClassroom() {
    const [person, setPerson] = createSignal<Person | null>(null);
    // Used to update ClassroomUserCourses
    const [updateSignal, setUpdateSIgnal] = createSignal(0);

    return (
        <div class="grid grid-cols-[16rem_25rem_1fr]">
            <Search setPerson={setPerson} />

            <ClassroomRegistration
                surname_first_letter={person()?.person_paternal_surname[0] ?? ""}
                userId={person()?.person_classroom_id ?? null}
                onSuccess={() => setUpdateSIgnal((s) => s + 1)}
            />

            <Show when={person() !== null && person()!.person_classroom_id === null}>
                <ClassroomUser
                    person={person()!}
                    onLink={(classroom_id) => setPerson((p) => ({...p!, person_classroom_id: classroom_id}))}
                />
            </Show>
            <Show when={person() !== null && person()!.person_classroom_id !== null}>
                <ClassroomUserCourses
                    userid={person()!.person_classroom_id!}
                    updateSignal={updateSignal()}
                />
            </Show>

        </div>
    );
}



function ClassroomUser(props: {person: Person, onLink: (classroom_id: number) => void,}) {
    const [active, setActive] = createSignal<TabType>("Vinculate");

    return (
        <div>
            <FilledCard class="border border-c-outline overflow-hidden">
                <h2 class="p-3 font-bold text-xl">
                    Persona no vinculada:
                </h2>
                <ClassroomTabs active={active()} setActive={setActive} />

                <div class="bg-c-surface">
                    <Show when={active() === "Vinculate"}>
                        <ClassroomVinculation
                            person_surname={`${props.person.person_paternal_surname} ${props.person.person_maternal_surname}`}
                            personId={props.person.person_id}
                            onLink={props.onLink}
                        />
                    </Show>
                    <Show when={active() === "Create"}>
                        <ClassroomUserCreation person={props.person} />
                    </Show>
                </div>

            </FilledCard>
        </div>
    );
}

function ClassroomTabs(props: {active: TabType, setActive: (v: TabType) => void}) {
    const presetsClasses = () => ((props.active === "Vinculate") ? "font-bold border-c-primary" : "border-c-transparent");
    const manualClasses = () => ((props.active === "Create") ? "font-bold border-c-primary" : "border-c-transparent");

    return (
        <div class="grid grid-cols-2">
            <button
                class={`py-2 border-b-4 ${presetsClasses()}`}
                onclick={() => props.setActive("Vinculate")}
            >
                Buscar
            </button>
            <button
                class={`py-2 border-b-4 ${manualClasses()}`}
                onclick={() => props.setActive("Create")}
            >
                Crear
            </button>
        </div>
    );
}