import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { faSearch, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useIconPicker } from "./IconPickerContext";
import { useDebouncedCallback } from "use-debounce";

export function SearchBar() {
  const { searchQuery, setSearchQuery } = useIconPicker();
  const inputRef = useRef<HTMLInputElement>(null);

  // local state so the input reflects immediately
  const [inputValue, setInputValue] = useState(searchQuery);

  // debounce pushing into the global searchQuery
  const debouncedSetSearch = useDebouncedCallback((val: string) => {
    setSearchQuery(val);
  }, 200);

  // sync local state when context searchQuery changes externally
  useEffect(() => {
    setInputValue(searchQuery);
  }, [searchQuery]);

  // Escape to clear
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setInputValue("");
        setSearchQuery("");
        inputRef.current?.blur();
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [setSearchQuery]);

  return (
    <div className=' flex justify-between items-center gap-2'>
      <div className='relative w-full'>
        <FontAwesomeIcon
          icon={faSearch}
          className='absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground'
        />
        <Input
          ref={inputRef}
          value={inputValue}
          onChange={(e) => {
            setInputValue(e.target.value);
            debouncedSetSearch(e.target.value);
          }}
          placeholder='Search over 2,350 icons...'
          className='pl-10 pr-10'
          aria-label='Search icons'
        />
        {inputValue && (
          <Button
            variant='ghost'
            size='icon'
            className='absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 text-muted-foreground hover:text-foreground'
            onClick={() => {
              setInputValue("");
              setSearchQuery("");
              inputRef.current?.focus();
            }}
            aria-label='Clear search'
          >
            <FontAwesomeIcon icon={faXmark} className='h-4 w-4' />
          </Button>
        )}
      </div>
    </div>
  );
}