// hooks/useMapComponentState.js
import { useState, useEffect } from "react";
import usePoiTypData from "./usePoiTypData";
import { useRecoilValue } from "recoil";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";

export const useMapComponentState = () => {
  const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
  const [deviceName, setDeviceName] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [priorityConfig, setPriorityConfig] = useState([]);
  const [menuItemAdded, setMenuItemAdded] = useState(false);
  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);

  // Fetch devices when the component is mounted
  useEffect(() => {
    const fetchDeviceData = async () => {
      try {
        const response = await fetch("/api/talas5/location_device"); // API call to get devices
        const data = await response.json();
        setLocationDeviceData(data); // Set the device data

        // Optional: set a default deviceName if needed
        if (data.length > 0) {
          setDeviceName(data[0].name); // Set the first device's name
        }
      } catch (error) {
        console.error("Error fetching device data:", error);
      }
    };

    fetchDeviceData();
  }, []); // Runs only once when the component is mounted

  return {
    poiTypData,
    isPoiTypLoaded,
    deviceName,
    setDeviceName,
    locationDeviceData,
    setLocationDeviceData,
    priorityConfig,
    setPriorityConfig,
    menuItemAdded,
    setMenuItemAdded,
    poiLayerVisible,
  };
};