import { FilledCard } from "../../components/FilledCard";
import { For } from "solid-js";
import { XIcon } from "../../icons/XIcon";
import { allCourses } from "../../utils/allCourses";


function isoDateToLocalDate(date: string): string {
    const [,month, day] = /\d{4}-(\d{2})-(\d{2})/.exec(date) ?? "";
    return `${day}/${month}`;
}

export function RegisterPreview(props: {selections: Array<[number, string]>, personId: number | null, onDelete: (v: number) => void, onRegister: () => void}) {
    const submit = async() => {
        console.log("Submit...");

        // TODO: Send all register requests at once
        for (const [courseId, date] of props.selections) {
            const result = await defaultNewRegisterFn(
                props.personId ?? -1,
                courseId,
                date,
            );

            if (result === null) {
                console.log("Success");
            } else {
                console.log(`error. ${result}`);
            }
        }

        props.onRegister();
    };

    return (
        <FilledCard class="border border-c-outline overflow-hidden">
            <h2 class="p-4 font-bold text-xl">Confirmar registro</h2>
            <div class="bg-c-surface p-4">
                <For each={props.selections}>
                    {([courseId, date]) => <Register courseId={courseId} date={date} onDelete={props.onDelete} />}
                </For>

                <button
                    class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer mt-4
                            disabled:opacity-50 disabled:cursor-not-allowed"
                    type="button"
                    disabled={props.selections.length === 0}
                    onclick={submit}
                >
                    Registrar los {props.selections.length} cursos
                </button>
            </div>
        </FilledCard>
    );
}

function Register(props: {courseId: number, date: string, onDelete: (v: number) => void}) {
    const courseName = () => {
        const courses = allCourses();
        return courses.find((course) => course.course_id === props.courseId)?.course_name ?? "!";
    };

    return (
        <div class="grid grid-cols-[auto_4rem_1.5rem] py-1 px-2 rounded-md border border-c-outline my-1">
            {courseName()}
            <span class="font-mono">{isoDateToLocalDate(props.date)}</span>
            <button
                class="hover:bg-c-surface-variant rounded-md"
                onclick={() => props.onDelete(props.courseId)}
            >
                <XIcon fill="var(--c-on-surface)" />
            </button>
        </div>
    );
}


async function defaultNewRegisterFn(personId: number, subjectId: number, date: string): Promise<null | string> {
    const response = await fetch("/certificate", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            personId,
            subjectId,
            date,
        }),
    });

    if (response.ok) {
        return null;
    } else {
        const data = await response.json();
        return JSON.stringify(data);
    }
}