update field doctors, cities, states and specialties

components/clinics/head/SearchBar.js

@@ -1,18 +1,34 @@
-import { Button, ButtonGroup, TextField } from "@mui/material";
-import SearchD from "@/components/icons/SearchD";
+import { ButtonGroup } from "@mui/material";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 import ModalSearchCity from "@/components/home/search/modal";
+import AutoSearch from "./AutoSearch";
+import { useRouter } from "next/navigation";
+import FilterButton from "./FilterButton";
 
 function SearchBar({
-  selected,
-  setSelected,
-  specialties,
   state,
-  handleSearch,
+  selected,
+  specialties,
+  setSelected,
+  setFilteredClinics,
 }) {
   const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  const handleSearch = (e) => {
+    const specialty = specialties.find((item) => item.name === e);
+    const searchParams = new URLSearchParams(window.location.search);
+
+    if (specialty) {
+      searchParams.set("specialty", specialty.name);
+      setSelected({ ...selected, specialty: specialty.name });
+    } else {
+      e ? searchParams.set("specialty", e) : searchParams.delete("specialty");
+      setSelected({ ...selected, specialty: e });
+    }
+    router.push(`?${searchParams.toString()}`);
+  };
 
   return (
     <ButtonGroup
@@ -28,29 +44,16 @@ function SearchBar({
         setOpen={setOpen}
         selected={selected}
         setSelected={setSelected}
-        // handleSearch={handleSearch}
       >
         <ButtonFilter setOpen={setOpen} selected={selected} />
       </ModalSearchCity>
-      <AutoCompleteSearch
+      <AutoSearch
         data={specialties}
+        inputValue={selected.specialty}
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      <Button
-        onClick={handleSearch}
-        className="
-          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
-          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
-          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
-          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
-          !max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px] 
-          !max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px] 
-        "
-      >
-        <SearchD />
-      </Button>
+      <FilterButton setFilteredClinics={setFilteredClinics} />
     </ButtonGroup>
   );
 }