feat: Implement dynamic state and city selection

- Load states and cities from JSON data files
- Filter cities based on selected state
- Update UI to disable city dropdown until state is selected
- Fix AutoCompleteSelect component to properly handle selection
- Reset city selection when state changes
- Display selected state and city in button

components/home/search/modal/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Box, Button, Modal } from "@mui/material";
 
 // Icon
@@ -11,18 +11,14 @@ import CloseModalD from "@/components/icons/CloseModalD";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 
-function ModalSearchCity() {
-  const states = [
-    { label: "تهران", id: 10 },
-    { label: "اصفهان", id: 20 },
-    { label: "مازندران", id: 30 },
-  ];
+// Data
+import statesData from "@/data/state.json";
+import citiesData from "@/data/city.json";
 
-  const cities = [
-    { label: "پردیس", id: 10 },
-    { label: "دماوند", id: 20 },
-    { label: "فیروزکوه", id: 30 },
-  ];
+function ModalSearchCity() {
+  const [states, setStates] = useState([]);
+  const [cities, setCities] = useState([]);
+  const [filteredCities, setFilteredCities] = useState([]);
 
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
@@ -33,8 +29,48 @@ function ModalSearchCity() {
     second: "",
   });
 
-  const updateData = (event, name) =>
-    setSelected({ ...selected, [name]: event });
+  // Load states and cities from JSON files
+  useEffect(() => {
+    // Format states data to match the structure expected by AutoCompleteSelect
+    const formattedStates = statesData.map(state => ({
+      label: state.name,
+      id: state.id
+    }));
+
+    // Format cities data
+    const formattedCities = citiesData.map(city => ({
+      label: city.name,
+      id: city.id,
+      province_id: city.province_id
+    }));
+
+    setStates(formattedStates);
+    setCities(formattedCities);
+  }, []);
+
+  // Filter cities when state is selected
+  useEffect(() => {
+    if (selected.first) {
+      const selectedState = states.find(state => state.label === selected.first);
+      if (selectedState) {
+        const stateId = selectedState.id;
+        const filteredCities = cities.filter(city => city.province_id === stateId);
+        setFilteredCities(filteredCities);
+      }
+    } else {
+      setFilteredCities([]);
+      setSelected({ ...selected, second: "" });
+    }
+  }, [selected.first, cities, states]);
+
+  const updateData = (event, name) => {
+    if (name === "first" && event !== selected.first) {
+      // If state changes, reset city selection
+      setSelected({ first: event, second: "" });
+    } else {
+      setSelected({ ...selected, [name]: event });
+    }
+  };
 
   return (
     <>
@@ -82,9 +118,10 @@ function ModalSearchCity() {
               />
               <AutoCompleteSelect
                 updateData={updateData}
-                list={cities}
+                list={filteredCities}
                 name="second"
                 label="شهر"
+                disabled={!selected.first || filteredCities.length === 0}
               />
             </div>
             <div className="w-full flex justify-end">
@@ -93,6 +130,7 @@ function ModalSearchCity() {
                 onClick={handleClose}
                 variant="contained"
                 color="primary"
+                disabled={!selected.first || !selected.second}
               >
                 تایید و ادامه
                 <ArrowLeftM />