import { createEffect, createSignal, For } from "solid-js";
// import type {CursoGIE} from "../../../model/CursoGIE/cursoGIE.entity";
import { isServer } from "solid-js/web";
import { allCourses } from "../../utils/allCourses";

export function SearchableSelect(props: {
    onChange: (id: number | null) => void,
    count: number
}) {
    const [filter, setFilter] = createSignal("");
    const [selected, setSelected] = createSignal<number | null>(null);
    const [inputValue, setInputValue] = createSignal("");

    const iHandler = (ev: KeyboardEvent & {currentTarget: HTMLInputElement, target: Element}) => {
        const inputEl = ev.target as HTMLInputElement;
        // Clear current selection
        setSelected(null);

        let filter: string = inputEl.value.toLowerCase();
        filter = filter.replace("á", "a");
        filter = filter.replace("é", "e");
        filter = filter.replace("í", "i");
        filter = filter.replace("ó", "o");
        filter = filter.replace("ú", "u");
        setFilter(filter);
    };

    createEffect(() => {
        props.onChange(selected());
    });

    createEffect(() => {
        // Makes reactivity happen, don't remove
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const _count = props.count;

        setFilter("");
        setSelected(null);
        setInputValue("");
    });

    const inputElement = (
        <input
            id="create-subject"
            class={`bg-c-background text-c-on-background
                    ${selected() !== null ? "border-c-green" : "border-c-outline"}
                    border-2 rounded-tl rounded-tr px-2 py-1
                    w-full
                    invalid:border-c-error invalid:text-c-error
                    focus:border-c-primary outline-none
                    disabled:opacity-50 disabled:cursor-not-allowed`}
            type="text"
            placeholder="Curso"
            onkeyup={iHandler}
            value={inputValue()}
            onchange={(ev) => setInputValue(ev.target.value)}
            autocomplete="off"
        />
    );

    if (!isServer) {
        (inputElement as HTMLInputElement).addEventListener("keydown", (ev) => {
            if (ev.code === "Enter") {
                ev.preventDefault();
            }
        });
    }

    const filteredOptions = () => {
        const filterText = filter();

        return allCourses().filter((course) => {
            let courseText = course.course_name.toLowerCase();
            courseText = courseText.replace("á", "a");
            courseText = courseText.replace("é", "e");
            courseText = courseText.replace("í", "i");
            courseText = courseText.replace("ó", "o");
            courseText = courseText.replace("ú", "u");

            return selected() === null && courseText.indexOf(filterText) !== -1;
        });
    };

    return (
        <>
            {inputElement}
            <br />
            <div
                class="border-c-outline border-l-2 border-b-2 border-r-2
                    rounded-bl rounded-br overflow-y-scroll h-[10rem]"
            >
                <For each={filteredOptions()}>
                    {(s) => (
                        <button
                            class="w-full text-left py-1 px-2
                                   hover:bg-c-primary-container hover:text-c-on-primary-container"
                            onclick={(ev) => {
                                ev.preventDefault();

                                setSelected(s.course_id);
                                setInputValue(s.course_name);
                            }}
                        >
                            {s.course_name}
                        </button>
                    )}
                </For>
            </div>
        </>
    );
}
