import { useEffect } from "react";
import { useSelector } from "react-redux";
import useHasScreenSize from "./useHasScreenSize";
import panCenterFeature from "./panCenterFeature";
const usePanDisplayFeature = () => {
  var _featureInfo$, _featureInfo$2, _featureInfo$3;
  const featureInfo = useSelector(state => state.app.featureInfo);
  const coordinate = (_featureInfo$ = featureInfo[0]) === null || _featureInfo$ === void 0 ? void 0 : _featureInfo$.coordinate;
  const map = useSelector(state => state.app.map);
  const activeTopic = useSelector(state => state.app.activeTopic);
  const menuOpen = useSelector(state => state.app.menuOpen);
  const feature = (_featureInfo$2 = featureInfo[0]) === null || _featureInfo$2 === void 0 ? void 0 : _featureInfo$2.features[0];
  const layer = (_featureInfo$3 = featureInfo[0]) === null || _featureInfo$3 === void 0 ? void 0 : _featureInfo$3.layer;
  const isMobile = useHasScreenSize();
  useEffect(() => {
    if (feature && layer && coordinate) {
      panCenterFeature(map, [layer], coordinate, menuOpen, isMobile, undefined, undefined, undefined, undefined, undefined, undefined, activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.overlaySide);
    }
  }, [activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.overlaySide, coordinate, feature, featureInfo, isMobile, layer, map, menuOpen]);
};
export default usePanDisplayFeature;
//# sourceMappingURL=usePanCenterFeature.js.map