"use client";

import { useState, useEffect } from "react";
import { Modal, Box } from "@mui/material";
import { styleDefault } from "@/mui";
import { addLabelToList } from "@/helper";

// Data
import states from "@/data/state.json";
import cities from "@/data/city.json";
import Content from "./Content";

function ModalSearchCity({
  open,
  state,
  filter,
  setOpen,
  children,
  setFilter,
  modalLocate,
}) {
  const stateSelected = filter?.state?.name;

  // const states = addLabelToList(statesData);
  // const cities = addLabelToList(citiesData);
  const [filteredCities, setFilteredCities] = useState([]);

  const handleClose = () => setOpen(false);

  useEffect(() => {
    if (stateSelected) {
      const selectedState = states.find(
        (state) => state.name === stateSelected
      );
      if (selectedState) {
        const stateId = selectedState.id;
        const filteredCities = cities.filter(
          (city) => city.province_id === stateId
        );
        setFilteredCities(filteredCities);
      }
    } else {
      setFilteredCities([]);
    }
  }, [stateSelected]);

  // const updateData = (event, name) => {
  //   if (name === "province" && event !== stateSelected) {
  //     setSelected({ province: event.name, city: "" });
  //   } else {
  //     setSelected({ ...selected, [name]: event.name });
  //   }
  // };

  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
            state={state}
            states={states}
            filter={filter}
            setFilter={setFilter}
            handleClose={handleClose}
            modalLocate={modalLocate}
            filteredCities={filteredCities}
          />
        </Box>
      </Modal>
    </>
  );
}

export default ModalSearchCity;