import { createSignal, For } from "solid-js";
import { isServer } from "solid-js/web";
import { allClassrooomCourses, ClassroomCourseValue } from "../types/ClassroomCourse";

export function ClassroomSearchableSelect(props: {
    onAdd: (key: ClassroomCourseValue) => void,
}) {
    const [filter, setFilter] = createSignal("");
    const [inputValue, setInputValue] = createSignal("");

    const iHandler = (ev: KeyboardEvent & {currentTarget: HTMLInputElement, target: Element}) => {
        const inputEl = ev.target as HTMLInputElement;

        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);
    };

    const selectCourse = (key: ClassroomCourseValue) => {
        props.onAdd(key);
        setFilter("");
        setInputValue("");
    };

    const inputElement = (
        <input
            id="create-subject"
            class={`bg-c-background text-c-on-background
                    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 Object.entries(allClassrooomCourses).filter(([, course]) => {
            let courseText = course.toLowerCase();
            courseText = courseText.replace("á", "a");
            courseText = courseText.replace("é", "e");
            courseText = courseText.replace("í", "i");
            courseText = courseText.replace("ó", "o");
            courseText = courseText.replace("ú", "u");

            return 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()}>
                    {([courseKey, courseName]) => (
                        <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();

                                selectCourse(courseKey as ClassroomCourseValue);
                            }}
                        >
                            {courseName}
                        </button>
                    )}
                </For>
            </div>
        </>
    );
}
