import React, { useState, useRef, useEffect, useCallback } from "react";
import { SearchIcon } from "../../assets/svg";
import useOutsideClick from "../../libs/hooks/useOutsideClick";
import { customDebounce } from "../../libs/utils/debounce";

interface TableSearchProps {
  value: string;
  onChange: (value: string) => void;
}

const TableSearch: React.FC<TableSearchProps> = ({ value, onChange }) => {
  const [showSearchInput, setShowSearchInput] = useState(false);
  const [localValue, setLocalValue] = useState(value);
  const searchContainerRef = useRef<HTMLDivElement>(null);

  // Debounced onChange function
  const debouncedOnChange = useCallback(
    customDebounce((newValue: string) => {
      onChange(newValue);
    }, 1000),
    [onChange]
  );

  // Sync local state with prop value
  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  useOutsideClick({
    ref: searchContainerRef,
    handler: () => {
      setShowSearchInput(false);
    },
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setLocalValue(newValue);
    debouncedOnChange(newValue);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      onChange(localValue);
    }
    if (e.key === "Escape") {
      setShowSearchInput(false);
    }
  };

  return (
    <div className="search-wrapper" ref={searchContainerRef}>
      <div
        className="search-icon ts--button"
        onClick={() => {
          setShowSearchInput((prev) => !prev);
          if (!showSearchInput) {
            // Focus input when showing
            setTimeout(() => {
              searchContainerRef.current?.querySelector("input")?.focus();
            }, 100);
          }
        }}
      >
        <SearchIcon />
      </div>
      <input
        type="text"
        className={`search-input ${showSearchInput ? "expanded" : ""}`}
        placeholder="Type to search"
        value={localValue}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
    </div>
  );
};

export default TableSearch;