import { Register } from "../../types/Register";
import { courseMap } from "../../utils/allCourses";
import { formatDate } from "../../utils/functions";

export function RegisterSidebar(props: {register: Register, close: () => void, onDelete: () => void}) {
    const deleteRegister = async() => {

        const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${props.register.register_id}`,{
            method: "DELETE",
        });

        if (res.ok) {
            props.onDelete();
            props.close();
        }
    };

    const courseName = () => courseMap()[props.register.register_course_id]?.course_name ?? "<curso no encontrado>";

    return (
        <div class="absolute top-0 bg-c-surface-variant right-0
                    py-4 px-6 w-[20rem]
                    shadow-md rounded-lg"
        >
            <p class="text-xl mb-8">Detalles del certificado</p>

            <p class="underline text-lg">Curso</p>
            <p class="mb-4">{courseName()}</p>

            <p class="underline text-lg">Código del certificado</p>
            <p class="mb-4">{props.register.register_code}</p>

            <p class="underline text-lg">Fecha de creación</p>
            <p class="mb-4">{formatDate(props.register.register_creation_date)}</p>

            <p class="underline text-lg">Fecha del certificado</p>
            <p class="mb-4">{formatDate(props.register.register_display_date)}</p>

            <p class="underline text-lg">Denominacion</p>
            <p class="mb-4">{props.register.register_custom_label}</p>

            <p class="underline text-lg">¿Es cert. sin firmas?</p>
            <p class="mb-8">{props.register.register_is_preview ? "Si" : "No"}</p>

            <button
                class="bg-c-error text-c-on-error px-4 py-2 rounded-full cursor-pointer
                        disabled:opacity-50 disabled:cursor-not-allowed"
                onclick={deleteRegister}
            >
                Eliminar cert.
            </button>
            <button
                class="ml-2 border border-c-outline bg-c-surface text-c-primary
                        px-4 py-2 rounded-full cursor-pointer
                        disabled:opacity-50 disabled:cursor-not-allowed"
                onclick={props.close}
            >
                Volver
            </button>
        </div>
    );
}
