function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { unByKey } from "ol/Observable";
import { extend, createEmpty } from "ol/extent";
import useTranslation from "../../../utils/useTranslation";
import MapButton from "../../../components/MapButton";
import { setFeatureInfo } from "../../../model/app/actions";
import { DV_KEY } from "../../../utils/constants";
import { ReactComponent as List } from "../../../img/list-icon-sbb.svg";
const getExtentFromFeatures = features => {
  let extent = createEmpty();
  features.forEach(feat => {
    extent = extend(extent, feat.getGeometry().getExtent());
  });
  return extent;
};
function DvListButton(_ref) {
  let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  const dispatch = useDispatch();
  const {
    t
  } = useTranslation();
  const layers = useSelector(state => state.map.layers);
  const map = useSelector(state => state.app.map);
  const dvMainLayer = useMemo(() => layers.find(l => l.key === "".concat(DV_KEY, ".main")), [layers]);
  const [features, setFeatures] = useState([]);
  useEffect(() => {
    const loadFeatsListener = dvMainLayer === null || dvMainLayer === void 0 ? void 0 : dvMainLayer.on("sync:features", evt => {
      setFeatures(evt.features);
    });
    return () => unByKey(loadFeatsListener);
  }, [dvMainLayer]);
  return /*#__PURE__*/React.createElement(MapButton, _extends({
    style: {
      padding: 8
    },
    title: t("Alle Direktverbindungen anzeigen"),
    disabled: !(features !== null && features !== void 0 && features.length),
    "data-testid": "dv-list-button",
    onClick: () => {
      if (!(features !== null && features !== void 0 && features.length)) return;
      const view = map.getView();
      const extent = getExtentFromFeatures(features);
      view.cancelAnimations();
      view.fit(extent, {
        duration: 500,
        padding: [100, 100, 100, 100],
        maxZoom: 6,
        callback: () => {
          const {
            mbMap
          } = dvMainLayer.mapboxLayer;
          if (mbMap) {
            mbMap.once("idle", () => {
              dvMainLayer.syncFeatures();
              dvMainLayer.highlightStation();
              dispatch(setFeatureInfo([{
                features: dvMainLayer.allFeatures,
                layer: dvMainLayer
              }]));
            });
          }
        }
      });
    }
  }, props), /*#__PURE__*/React.createElement(List, null));
}
export default DvListButton;
//# sourceMappingURL=DvListButton.js.map