import { For, Show, createEffect, onMount } from "solid-js";
import { LoadingStatus, backend, useLoading, wait } from "../../utils/functions";
import { JsonResult } from "../../types/JsonResult";
import { ClassroomCourse } from "../../types/ClassroomCourse";
import { LoadingIcon } from "../../icons/LoadingIcon";
import { OutlinedCard } from "../../components/OutlinedCard";
import { XIcon } from "../../icons/XIcon";
import { QuestionIcon } from "../../icons/QuestionIcon";

export function CoursesList(props: {userid: number, updateSignal: number, courses: Array<ClassroomCourse>, setCourses: (c: Array<ClassroomCourse>) => void}) {

    const {setError, status, setStatus} = useLoading();

    const loadCourses = async() => {
        setStatus(LoadingStatus.Loading);
        setError("");
        props.setCourses([]);

        if (import.meta.env.DEV) await wait(1500);

        backend.get<JsonResult<Array<ClassroomCourse>>>(`/api/classroom/course/${props.userid}`)
            .then((res) => {
                props.setCourses(res.data.Ok);
                setStatus(LoadingStatus.Ok);
            })
            .catch((err) => {
                console.log(err);
                setError(err);
                setStatus(LoadingStatus.Error);
            });
    };

    onMount(loadCourses);

    createEffect(() => {
        // Update courses when updateSignal changes
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const _ = props.updateSignal;

        loadCourses();
    });

    return (
        <OutlinedCard class="w-[24rem] h-[19.5rem] overflow-hidden">
            <h2 class="text-xl p-3 bg-c-surface-variant text-c-on-surface-variant">
                Cursos matriculados
            </h2>

            <div class="py-2 text-center">
                <Show when={status() === LoadingStatus.Loading}>
                    <span class="inline-block scale-[200%]">
                        <LoadingIcon
                            class="animate-spin mr-2"
                            fill="var(--c-primary)"
                            size={16}
                        />
                    </span>
                </Show>
            </div>

            <For each={props.courses}>
                {(c) => <Course course={c} />}
            </For>
            <Show when={status() === LoadingStatus.Ok && props.courses.length === 0}>
                <div class="px-4 pb-2 text-center">
                    <div class="text-center pt-6 pb-4">
                        <QuestionIcon class="scale-[200%]" fill="var(--c-outline)" />
                    </div>
                    <p>No está matriculado a ningun curso.</p>
                </div>
            </Show>
        </OutlinedCard>
    );
}

function Course(props: {course: ClassroomCourse}) {
    return (
        <div
            class="px-4 py-3 transition-colors
                grid grid-cols-[auto_2rem] gap-2
                hover:bg-c-surface-variant hover:text-c-on-surface-variant"
        >
            <p>{props.course.name}</p>
            <button
                class="disabled:opacity-50 disabled:cursor-not-allowed"
                disabled
            >
                <XIcon fill="var(--c-error)" />
            </button>
        </div>
    );
}
