import { BadgePercent, ChevronDown, Globe, Pencil, ScanEye, SwatchBook } from "lucide-react";
import { cn } from "@/lib/utils";
import { Popover, Transition } from "@headlessui/react";
import { SiReddit, SiYoutube } from "@icons-pack/react-simple-icons";
import { Fragment } from "react";

const focusModes = [
  {
    key: "webSearch",
    title: "All",
    description: "Searches across all of the internet",
    icon: <Globe size={20} />,
  },
  {
    key: "academicSearch",
    title: "Academic",
    description: "Search in published academic papers",
    icon: <SwatchBook size={20} />,
  },
  {
    key: "writingAssistant",
    title: "Writing",
    description: "Chat without searching the web",
    icon: <Pencil size={16} />,
  },
  {
    key: "wolframAlphaSearch",
    title: "Wolfram Alpha",
    description: "Computational knowledge engine",
    icon: <BadgePercent size={20} />,
  },
  {
    key: "youtubeSearch",
    title: "Youtube",
    description: "Search and watch videos",
    icon: (
      <SiYoutube className="h-5 w-auto mr-0.5" onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
    ),
  },
  {
    key: "redditSearch",
    title: "Reddit",
    description: "Search for discussions and opinions",
    icon: (
      <SiReddit className="h-5 w-auto mr-0.5" onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
    ),
  },
];

const Focus = ({ focusMode, setFocusMode }: { focusMode: string; setFocusMode: (mode: string) => void }) => {
  return (
    <Popover className="fixed w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
      <Popover.Button
        type="button"
        className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
      >
        {focusMode === "webSearch" ? (
          <ScanEye />
        ) : (
          <div className="flex flex-row items-center space-x-1">
            {focusModes.find(mode => mode.key === focusMode)?.icon}
            <p className="text-xs font-medium">{focusModes.find(mode => mode.key === focusMode)?.title}</p>
            <ChevronDown size={20} />
          </div>
        )}
      </Popover.Button>
      <Transition
        as={Fragment}
        enter="transition ease-out duration-150"
        enterFrom="opacity-0 translate-y-1"
        enterTo="opacity-100 translate-y-0"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 translate-y-0"
        leaveTo="opacity-0 translate-y-1"
      >
        <Popover.Panel className="absolute z-10 w-full">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
            {focusModes.map((mode, index) => (
              <Popover.Button
                onClick={() => setFocusMode(mode.key)}
                key={index}
                className={cn(
                  "p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition",
                  focusMode === mode.key
                    ? "bg-light-secondary dark:bg-dark-secondary"
                    : "hover:bg-light-secondary dark:hover:bg-dark-secondary",
                )}
              >
                <div
                  className={cn(
                    "flex flex-row items-center space-x-1",
                    focusMode === mode.key ? "text-[#24A0ED]" : "text-black dark:text-white",
                  )}
                >
                  {mode.icon}
                  <p className="text-sm font-medium">{mode.title}</p>
                </div>
                <p className="text-black/70 dark:text-white/70 text-xs">{mode.description}</p>
              </Popover.Button>
            ))}
          </div>
        </Popover.Panel>
      </Transition>
    </Popover>
  );
};

export default Focus;