"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;