import { Search } from "@kobalte/core/search";
import { A, useNavigate } from "@solidjs/router";
import { IconRefresh, IconSearch } from "@tabler/icons-solidjs";
import { image } from "@tauri-apps/api";
import clsx from "clsx";
import Fuse from "fuse.js";
import { For, createEffect, createResource, createSignal } from "solid-js";
import { ImageViewer } from "./components/ImageViewer";
import { getUserImages } from "./network";

type UserImages = Awaited<ReturnType<typeof getUserImages>>;

function App() {
    const [searchResults, setSearchResults] = createSignal<
        UserImages[number]["Text"]
    >([]);

    const [images] = createResource(getUserImages);

    const nav = useNavigate();

    let fuze = new Fuse<NonNullable<UserImages[number]["Text"]>[number]>([], {
        keys: ["Text.ImageText"],
    });

    // TODO: there's probably a better way?
    createEffect(() => {
        const userImages = images();

        console.log(userImages);
        if (userImages == null) {
            return;
        }

        const imageText = userImages.flatMap((i) => i.Text ?? []);

        fuze = new Fuse(imageText, {
            keys: ["ImageText"],
            threshold: 0.3,
        });
    });

    const onInputChange = (query: string) => {
        // TODO: we can migrate this searching to Rust, so we don't abuse the main thread.
        // But, it's not too bad as is.
        setSearchResults(fuze.search(query).flatMap((s) => s.item));
    };

    return (
        <main class="container pt-2">
            <div class="px-4">
                <Search
                    triggerMode="focus"
                    options={searchResults() ?? []}
                    onInputChange={onInputChange}
                    onChange={(item) => {
                        if (item?.ImageID == null) {
                            console.error("ImageID was null");
                            return;
                        }

                        nav(`/image/${item.ImageID}`);
                    }}
                    optionValue="ID"
                    optionLabel="ImageText"
                    placeholder="Search for stuff..."
                    itemComponent={(props) => (
                        <Search.Item
                            item={props.item}
                            class={clsx(
                                "text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-full box-border",
                                "hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
                            )}
                        >
                            <Search.ItemLabel class="mx-[-100px]">
                                {props.item.rawValue.ImageText ?? ""}
                            </Search.ItemLabel>
                        </Search.Item>
                    )}
                >
                    <Search.Control
                        class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
                        aria-label="Emoji"
                    >
                        <Search.Indicator
                            class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
                            loadingComponent={
                                <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
                                    <IconRefresh
                                        size={20}
                                        class="m-auto animate-spin"
                                    />
                                </Search.Icon>
                            }
                        >
                            <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
                                <IconSearch class="m-auto size-5 text-gray-600" />
                            </Search.Icon>
                        </Search.Indicator>
                        <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
                    </Search.Control>
                    <Search.Portal>
                        <Search.Content
                            class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
                            onCloseAutoFocus={(e) => e.preventDefault()}
                        >
                            <Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-col justify-start gap-1.5 leading-none focus:outline-none" />
                            <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
                                😬 No emoji found
                            </Search.NoResult>
                        </Search.Content>
                    </Search.Portal>
                </Search>
            </div>
            {/* <div class="mt-4 text-base leading-none">
        Emoji selected: {emoji()?.emoji} {emoji()?.name}
      </div> */}
            <ImageViewer />
            <div class="px-4 mt-4 bg-white rounded-t-2xl">
                <div class="h-[254px] overflow-scroll scrollbar-hide">
                    <div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
                        {/* <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
						<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
						<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
						<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" /> */}
                        {/* {JSON.stringify(images())} */}
                        <For each={images()}>
                            {(image) => (
                                <A href={`/image/${image.ID}`}>
                                    <img
                                        src={`http://localhost:3040/image/${image.ID}`}
                                        class="col-span-3 row-span-3 rounded-xl"
                                        alt=""
                                    />
                                </A>
                            )}
                        </For>
                    </div>
                </div>
            </div>
            <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
                footer
            </div>
        </main>
    );
}

export default App;