import { createEffect, createSignal, For, onMount } from "solid-js";
import { customLabelsMap } from "../../utils/allCustomLabels";

export function CustomLabelSelect(props: {
    onChange: (value: string) => void,
    count: number
}) {
    const [filter, setFilter] = createSignal("");
    const [selected, setSelected] = createSignal<boolean>(false);
    const [inputValue, setInputValue] = createSignal("");

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

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

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

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

    let inputElement: HTMLInputElement | undefined;

    onMount(() => {
        inputElement?.addEventListener("keydown", (ev) => {
            if (ev.code === "Enter") {
                ev.preventDefault();
            }
        });
    });


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

        return Object.entries(customLabelsMap()).filter(([, label]) => {
            let courseText = label.custom_label_value.toLowerCase();
            courseText = courseText.replace("á", "a");
            courseText = courseText.replace("é", "e");
            courseText = courseText.replace("í", "i");
            courseText = courseText.replace("ó", "o");
            courseText = courseText.replace("ú", "u");

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

    return (
        <div class="relative">
            <input
                id="create-subject"
                ref={inputElement}
                class={`bg-c-background text-c-on-background 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="Denominación"
                onkeyup={iHandler}
                value={inputValue()}
                onchange={(ev) => setInputValue(ev.target.value)}
                autocomplete="off"
            />

            <br />
            <div
                class="border-c-outline border-l-2 border-b-2 border-r-2
                    rounded-bl rounded-br overflow-y-scroll h-[4rem]
                    absolute w-full"
            >
                <For each={filteredOptions()}>
                    {([, label]) => (
                        <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(true);
                                setInputValue(label.custom_label_value);
                            }}
                        >
                            {label.custom_label_value}
                        </button>
                    )}
                </For>
            </div>
        </div>
    );
}
