import { createSignal, Show } from "solid-js";
import { FilledCard } from "../../components/FilledCard";
import { RegisterPreview } from "./RegisterPreview";
import { RegisterPresets } from "./RegisterPresets";
import { ManualRegistration } from "./ManualRegistration";



type TabType = "Presets" | "Manual";

export function NewRegister(props: {
    personId: number | null,
    onSuccess: () => void,
}) {
    const [active, setActive] = createSignal<TabType>("Manual");
    const [selections, setSelections] = createSignal<Array<[number, string]>>([]);

    const onRegister = () => {
        setSelections([]);
        props.onSuccess();
    };

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

                <RegisterTabs active={active()} setActive={setActive} />

                <div class="bg-c-surface p-4 h-[22rem]">
                    <Show when={active() === "Presets"}>
                        <RegisterPresets />
                    </Show>
                    <Show when={active() === "Manual"}>
                        <ManualRegistration
                            personId={props.personId}
                            onAdd={(v) => setSelections((x) => [...x, v])}
                        />
                    </Show>
                </div>
            </FilledCard>

            <RegisterPreview
                selections={selections()}
                personId={props.personId}
                onDelete={(deleteId) => setSelections((s) => [...s.filter(([id]) => id !== deleteId)])}
                onRegister={onRegister}
            />
        </div>
    );
}


function RegisterTabs(props: {active: TabType, setActive: (v: TabType) => void}) {
    const presetsClasses = () => ((props.active === "Presets") ? "font-bold border-c-primary" : "border-c-transparent");
    const manualClasses = () => ((props.active === "Manual") ? "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("Presets")}
            >
                Presets
            </button>
            <button
                class={`py-2 border-b-4 ${manualClasses()}`}
                onclick={() => props.setActive("Manual")}
            >
                Manual
            </button>
        </div>
    );
}