import { createSignal } from "solid-js";
import { Search } from "@kobalte/core/search";
import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
import clsx from "clsx";

type Emoji = {
  emoji: string;
  name: string;
};

function App() {
  const [options, setOptions] = createSignal<Emoji[]>([]);
  const [emoji, setEmoji] = createSignal<Emoji | null>(null);

  const emojiData: Emoji[] = [
    { emoji: "😀", name: "Grinning Face" },
    { emoji: "😃", name: "Grinning Face with Big Eyes" },
    { emoji: "😄", name: "Grinning Face with Smiling Eyes" },
    { emoji: "😁", name: "Beaming Face with Smiling Eyes" },
    { emoji: "😆", name: "Grinning Squinting Face" },
  ];

  const queryEmojiData = (query: string) => {
    return emojiData.filter((emoji) =>
      emoji.name.toLowerCase().includes(query.toLowerCase())
    );
  };

  return (
    <main class="container px-4 pt-2 pb-4">
      <Search
        triggerMode="focus"
        options={options()}
        onInputChange={(query) => setOptions(queryEmojiData(query))}
        onChange={(result) => setEmoji(result)}
        optionValue="name"
        optionLabel="name"
        placeholder="Search an emoji…"
        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-[calc(20%-5px)] 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.emoji}
            </Search.ItemLabel>
          </Search.Item>
        )}
      >
        <Search.Control
          class="inline-flex justify-between w-full rounded-md 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 bg-gray-100 border-r border-gray-200 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 class="m-auto animate-spin" />
              </Search.Icon>
            }
          >
            <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
              <IconSearch class="m-auto" />
            </Search.Icon>
          </Search.Indicator>
          <Search.Input class="appearance-none inline-flex w-full min-h-[40px] pl-4 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-row justify-start flex-wrap 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 class="mt-4 text-base leading-none">
        Emoji selected: {emoji()?.emoji} {emoji()?.name}
      </div>
    </main>
  );
}

export default App;