SearchInput.tsx

import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/20/solid";
import { motion } from "framer-motion";
import { useCallback, useEffect, useRef, useState } from "react";
import { Input } from "~/components/primitives/Input";
import { ShortcutKey } from "~/components/primitives/ShortcutKey";
import { useSearchParams } from "~/hooks/useSearchParam";
import { cn } from "~/utils/cn";

export type SearchInputProps = {
  placeholder?: string;
  /** Additional URL params to reset when searching or clearing (e.g. pagination). Defaults to ["cursor", "direction"]. */
  resetParams?: string[];
};

export function SearchInput({
  placeholder = "Search logs…",
  resetParams = ["cursor", "direction"],
}: SearchInputProps) {
  const inputRef = useRef<HTMLInputElement>(null);

  const { value, replace, del } = useSearchParams();

  const initialSearch = value("search") ?? "";

  const [text, setText] = useState(initialSearch);
  const [isFocused, setIsFocused] = useState(false);

  useEffect(() => {
    const urlSearch = value("search") ?? "";
    if (urlSearch !== text && !isFocused) {
      setText(urlSearch);
    }
  }, [value, text, isFocused]);

  const handleSubmit = useCallback(() => {
    const resetValues = Object.fromEntries(resetParams.map((p) => [p, undefined]));
    if (text.trim()) {
      replace({ search: text.trim(), ...resetValues });
    } else {
      del(["search", ...resetParams]);
    }
  }, [text, replace, del, resetParams]);

  const handleClear = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      e.preventDefault();
      e.stopPropagation();
      setText("");
      del(["search", ...resetParams]);
    },
    [del, resetParams]
  );

  return (
    <div className="flex items-center gap-1">
      <motion.div
        initial={{ width: "auto" }}
        animate={{ width: isFocused && text.length > 0 ? "24rem" : "auto" }}
        transition={{
          type: "spring",
          stiffness: 300,
          damping: 30,
        }}
        className="relative h-6 min-w-52"
      >
        <Input
          type="text"
          ref={inputRef}
          variant="secondary-small"
          placeholder={placeholder}
          value={text}
          onChange={(e) => setText(e.target.value)}
          fullWidth
          className={cn("", isFocused && "placeholder:text-text-dimmed/70")}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              handleSubmit();
            }
            if (e.key === "Escape") {
              e.currentTarget.blur();
            }
          }}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          icon={<MagnifyingGlassIcon className="size-4" />}
          accessory={
            text.length > 0 ? (
              <div className="-mr-1 flex items-center gap-1.5">
                <ShortcutKey shortcut={{ key: "enter" }} variant="medium" className="border-none" />
                <button
                  type="button"
                  onClick={handleClear}
                  className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
                  title="Clear search"
                >
                  <XMarkIcon className="size-3" />
                </button>
              </div>
            ) : undefined
          }
        />
      </motion.div>
    </div>
  );
}