import React from "react";
import { useSearchParams } from "@remix-run/react";
import AppInput from "./AppInput";
import { Search as SearchIcon } from "lucide-react";
import FilterDrawer from "./FilterDrawer";

interface SearchTopBarProps {
  searchValue: string;
  setSearchValue: (value: string) => void;
  placeholder?: string;
  minimumPrice?: number;
  maximumPrice?: number;
  onSearch?: () => void;
}

const SearchTopBar: React.FC<SearchTopBarProps> = ({
  searchValue,
  setSearchValue,
  placeholder = "جستجو...",
  minimumPrice = 0,
  maximumPrice = 10000000,
  onSearch,
}) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const isChangedSearchBar = searchValue !== (searchParams.get("q") || "");

  const handleSearch = () => {
    if (onSearch) {
      onSearch();
      return;
    }

    if (isChangedSearchBar) {
      const params = new URLSearchParams(searchParams);
      if (searchValue.trim()) {
        params.set("q", searchValue);
      } else {
        params.delete("q");
      }
      setSearchParams(params, { replace: true });
    }
  };

  return (
    <div className="flex flex-col gap-4 py-4 px-4 w-full sticky top-0 z-30 bg-WHITE">
      <div className="flex items-center justify-center gap-2 rounded-[10px] w-full relative">
        <AppInput
          inputIcon={SearchIcon}
          inputDir="rtl"
          inputTitle={""}
          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
            if (e.key === "Enter") {
              handleSearch();
            }
          }}
          className="bg-WHITE2 focus:border-blue-500"
          inputValue={searchValue}
          inputPlaceholder={placeholder}
          inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            setSearchValue(e.target.value);
          }}
        />
        <FilterDrawer minimumPrice={minimumPrice} maximumPrice={maximumPrice} />
      </div>
    </div>
  );
};

export default SearchTopBar;