131 lines
4.1 KiB
JavaScript
131 lines
4.1 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Box, Button, Modal } from "@mui/material";
|
|
|
|
// Icon
|
|
import { styleDefault } from "@/mui";
|
|
import CloseModalD from "@/components/icons/CloseModalD";
|
|
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
|
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
|
|
|
// Data
|
|
import statesData from "@/data/state.json";
|
|
import citiesData from "@/data/city.json";
|
|
|
|
function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
|
|
const provinceSelected = selected.province;
|
|
const citySelected = selected.city;
|
|
const [states, setStates] = useState([]);
|
|
const [cities, setCities] = useState([]);
|
|
const [filteredCities, setFilteredCities] = useState([]);
|
|
|
|
const handleClose = () => setOpen(false);
|
|
|
|
// 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 (provinceSelected) {
|
|
const selectedState = states.find(
|
|
(state) => state.label === provinceSelected
|
|
);
|
|
if (selectedState) {
|
|
const stateId = selectedState.id;
|
|
const filteredCities = cities.filter(
|
|
(city) => city.province_id === stateId
|
|
);
|
|
setFilteredCities(filteredCities);
|
|
}
|
|
} else {
|
|
setFilteredCities([]);
|
|
setSelected({ ...selected, city: "" });
|
|
}
|
|
}, [provinceSelected, cities, states]);
|
|
|
|
const updateData = (event, name) => {
|
|
if (name === "province" && event !== provinceSelected) {
|
|
// If state changes, reset city selection
|
|
setSelected({ province: event, city: "" });
|
|
} else {
|
|
setSelected({ ...selected, [name]: event });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Button Modal */}
|
|
{children}
|
|
|
|
{/* Content Modal */}
|
|
<Modal open={open} onClose={handleClose}>
|
|
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
|
|
<div className="flex justify-end w-full">
|
|
<div className="cursor-pointer" onClick={handleClose}>
|
|
<CloseModalD />
|
|
</div>
|
|
</div>
|
|
<div className="md:p-[24px] pt-0">
|
|
<p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
|
|
شهر یا استان مورد نظر را انتخاب نمایید:
|
|
</p>
|
|
<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 && provinceSelected}
|
|
list={states}
|
|
label="استان"
|
|
name="province"
|
|
/>
|
|
<AutoCompleteSelect
|
|
updateData={updateData}
|
|
value={
|
|
selected &&
|
|
citySelected &&
|
|
filteredCities.find((item) => item.label === citySelected) &&
|
|
citySelected
|
|
}
|
|
list={filteredCities}
|
|
name="city"
|
|
label="شهر"
|
|
disabled={!provinceSelected || filteredCities.length === 0}
|
|
/>
|
|
</div>
|
|
<div className="w-full flex justify-end">
|
|
<Button
|
|
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
|
onClick={handleClose}
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={!provinceSelected || !citySelected}
|
|
>
|
|
تایید و ادامه
|
|
<ArrowLeftM />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSearchCity;
|