save data modal search-city and show default value

app/component/element/AutoCompleteSelect.js

@@ -2,9 +2,18 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function AutoCompleteSelect({ list, isError, updateData, name, label, disabled = false }) {
+function AutoCompleteSelect({
+  list,
+  value,
+  isError,
+  updateData,
+  name,
+  label,
+  disabled = false,
+}) {
   return (
     <Autocomplete
+      value={value || null}
       disablePortal
       options={list}
       disabled={disabled}

app/component/modalSearchCity/ButtonFilter.js

@@ -3,7 +3,9 @@ import ArrowBottomH from "@/components/icons/ArrowBottomH";
 import Location from "@/components/icons/Location";
 import { Button } from "@mui/material";
 
-function ButtonFilter({ selected }) {
+function ButtonFilter({ selected, setOpen }) {
+  const handleOpen = () => setOpen(true);
+
   return (
     <div>
       <Button
@@ -18,9 +20,9 @@ function ButtonFilter({ selected }) {
         <p
           className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
                     md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
-                    ${selected.first && selected.second ? "" : ""}`}
+                    ${selected && selected.first && selected.second ? "" : ""}`}
         >
-          {selected.first && selected.second
+          {selected && selected.first && selected.second
             ? `${selected.first} | ${selected.second}`
             : "انتخاب شهر"}
         </p>

app/component/modalSearchCity/index.js

@@ -4,8 +4,6 @@ import { useState, useEffect } from "react";
 import { Box, Button, Modal } from "@mui/material";
 
 // Icon
-import ArrowBottomH from "@/components/icons/ArrowBottomH";
-import Location from "@/components/icons/Location";
 import { styleDefault } from "@/mui";
 import CloseModalD from "@/components/icons/CloseModalD";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
@@ -15,20 +13,15 @@ import ArrowLeftM from "@/components/icons/ArrowLeftM";
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 
-function ModalSearchCity({ children }) {
+function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
+  const secondSelected = selected.second;
+  const firstSelected = selected.first;
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [filteredCities, setFilteredCities] = useState([]);
 
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const [selected, setSelected] = useState({
-    first: "",
-    second: "",
-  });
-
   // Load states and cities from JSON files
   useEffect(() => {
     // Format states data to match the structure expected by AutoCompleteSelect
@@ -50,9 +43,9 @@ function ModalSearchCity({ children }) {
 
   // Filter cities when state is selected
   useEffect(() => {
-    if (selected.first) {
+    if (firstSelected) {
       const selectedState = states.find(
-        (state) => state.label === selected.first
+        (state) => state.label === firstSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -65,10 +58,10 @@ function ModalSearchCity({ children }) {
       setFilteredCities([]);
       setSelected({ ...selected, second: "" });
     }
-  }, [selected.first, cities, states]);
+  }, [firstSelected, cities, states]);
 
   const updateData = (event, name) => {
-    if (name === "first" && event !== selected.first) {
+    if (name === "first" && event !== firstSelected) {
       // If state changes, reset city selection
       setSelected({ first: event, second: "" });
     } else {
@@ -79,28 +72,7 @@ function ModalSearchCity({ children }) {
   return (
     <>
       {/* Button Modal */}
-      <Button
-        className="!border-none hover:!bg-transparent !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
-        onClick={handleOpen}
-        variant="contained"
-        color="secondary"
-      >
-        <div className="min-w-[20px] min-h-[20px] hidden md:flex">
-          <Location />
-        </div>
-        <p
-          className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
-                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
-                    ${selected.first && selected.second ? "" : ""}`}
-        >
-          {selected.first && selected.second
-            ? `${selected.first} | ${selected.second}`
-            : "انتخاب شهر"}
-        </p>
-        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
-          <ArrowBottomH />
-        </div>
-      </Button>
+      {children}
 
       {/* Content Modal */}
       <Modal open={open} onClose={handleClose}>
@@ -117,16 +89,25 @@ function ModalSearchCity({ children }) {
             <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
               <AutoCompleteSelect
                 updateData={updateData}
+                value={selected && firstSelected}
                 list={states}
                 label="استان"
                 name="first"
               />
               <AutoCompleteSelect
                 updateData={updateData}
+                value={
+                  selected &&
+                  secondSelected &&
+                  filteredCities.find(
+                    (item) => item.label === secondSelected
+                  ) &&
+                  secondSelected
+                }
                 list={filteredCities}
                 name="second"
                 label="شهر"
-                disabled={!selected.first || filteredCities.length === 0}
+                disabled={!firstSelected || filteredCities.length === 0}
               />
             </div>
             <div className="w-full flex justify-end">
@@ -135,7 +116,7 @@ function ModalSearchCity({ children }) {
                 onClick={handleClose}
                 variant="contained"
                 color="primary"
-                disabled={!selected.first || !selected.second}
+                disabled={!firstSelected || !secondSelected}
               >
                 تایید و ادامه
                 <ArrowLeftM />

components/home/search/index.js

@@ -1,9 +1,19 @@
+"use client";
+
 import Search from "@/components/icons/Search";
 import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
+import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
+import { useState } from "react";
 
 function SearchBar() {
+  const [selected, setSelected] = useState({
+    first: "",
+    second: "",
+  });
+  const [open, setOpen] = useState(false);
+
   return (
     <ButtonGroup
       variant="contained"
@@ -13,7 +23,14 @@ function SearchBar() {
             !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
             "
     >
-      <ModalSearchCity />
+      <ModalSearchCity
+        open={open}
+        setOpen={setOpen}
+        selected={selected}
+        setSelected={setSelected}
+      >
+        <ButtonFilter setOpen={setOpen} selected={selected} />
+      </ModalSearchCity>
       <span className="black w-px bg-[#EFEFEF]"></span>
       <TextField
         variant="standard"