import { icons } from "@/lib/client/icons";
import Fuse from "fuse.js";
import { useMemo } from "react";

const fuse = new Fuse(icons, {
  keys: [{ name: "name", weight: 4 }, "tags", "categories"],
  threshold: 0.2,
  useExtendedSearch: true,
});

type Props = {
  query: string;
  color: string;
  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
  iconName?: string;
  setIconName: Function;
};

const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
  const filteredQueryResultsSelector = useMemo(() => {
    if (!query) {
      return icons;
    }
    return fuse.search(query).map((result) => result.item);
  }, [query]);

  return (
    <>
      {filteredQueryResultsSelector.map((icon) => {
        const IconComponent = icon.Icon;
        return (
          <div
            key={icon.pascal_name}
            onClick={() => setIconName(icon.pascal_name)}
            className={`cursor-pointer btn p-1 box-border bg-base-100 border-none w-full ${
              icon.pascal_name === iconName
                ? "outline outline-1 outline-primary"
                : ""
            }`}
          >
            <IconComponent size={32} weight={weight} color={color} />
          </div>
        );
      })}
    </>
  );
};

export default IconGrid;