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


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() => {
        const registers: RegisterBatchCreate = props.selections.map(([courseId, date]) => ({
            person_id: props.personId!,
            course_id: courseId,
            date,
        }));

        const result = await createRegisters(registers);

        if (result === null) {
            console.log("Create register: 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 ?? `Curso invalido! (${props.courseId})`;
    };

    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 createRegisters(data: RegisterBatchCreate): Promise<null | string> {
    const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/batch`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    });

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