102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Modal, Box } from "@mui/material";
|
|
import { styleDefault } from "@/mui";
|
|
|
|
// Data
|
|
import statesData from "@/data/state.json";
|
|
import citiesData from "@/data/city.json";
|
|
import Content from "./Content";
|
|
import { useProvince } from "@/context/ProvinceProvider";
|
|
|
|
function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
|
|
const provinceSelected = selected.province;
|
|
const { isProvinceInclude } = useProvince();
|
|
const newProvinceData = isProvinceInclude?.id === 63;
|
|
|
|
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 if (isProvinceInclude) {
|
|
setSelected({
|
|
...selected,
|
|
province: statesData.find(
|
|
(state) => state.id === isProvinceInclude.province_id
|
|
)?.name,
|
|
});
|
|
} 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">
|
|
<Content
|
|
states={states}
|
|
selected={selected}
|
|
updateData={updateData}
|
|
handleClose={handleClose}
|
|
filteredCities={filteredCities}
|
|
provinceSelected={provinceSelected}
|
|
isProvinceInclude={newProvinceData}
|
|
/>
|
|
</Box>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSearchCity;
|