import { useEffect, useState } from "react";
import SidebarItem from "./SidebarItem";
import { Search } from "lucide-react";
import SearchModal from "../modals/SearchModal/SearchModal";

interface Props {
  size: number;
}

export default function SidebarSearch({ size }: Props) {
  const [open, setModalOpen] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const active = document.activeElement;
      const isTyping =
        active &&
        (active.tagName === "INPUT" ||
          active.tagName === "TEXTAREA" ||
          (active as HTMLElement).isContentEditable);

      if (!isTyping && e.key === "/") {
        e.preventDefault();
        setModalOpen(!open);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open]);

  return (
    <SidebarItem
      space={26}
      onClick={() => setModalOpen(true)}
      name="Search"
      keyHint="/"
      children={<Search size={size} />}
      modal={<SearchModal open={open} setOpen={setModalOpen} />}
    />
  );
}
