import React, { useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import PropTypes from "prop-types";
import { FaInfoCircle } from "react-icons/fa";
import { IconButton } from "@mui/material";
import useTranslation from "../../utils/useTranslation";
import { setSelectedForInfos } from "../../model/app/actions";
import { trackEvent } from "../../utils/trackingUtils";
function InfosButton(_ref) {
  let {
    selectedInfo,
    className = "wkp-info-bt"
  } = _ref;
  const {
    t
  } = useTranslation();
  const dispatch = useDispatch();
  const selectedForInfos = useSelector(state => state.app.selectedForInfos);
  const activeTopic = useSelector(state => state.app.activeTopic);
  const isSelected = useMemo(() => {
    return selectedForInfos === selectedInfo;
  }, [selectedForInfos, selectedInfo]);
  const classNam = useMemo(() => {
    const classes = [className];
    if (isSelected) {
      classes.push("wkp-selected");
    }
    return classes.join(" ");
  }, [className, isSelected]);
  return /*#__PURE__*/React.createElement(IconButton, {
    className: classNam,
    title: t("Layerinformationen anzeigen", {
      layer: t(selectedInfo.key)
    }),
    onClick: evt => {
      trackEvent({
        eventType: "action",
        componentName: "info button",
        label: t(selectedInfo.key),
        location: t(activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.name, {
          lng: "de"
        }),
        variant: selectedInfo !== null && selectedInfo !== void 0 && selectedInfo.get ? "Layer" : "Topic" // We test the get method for layer or topic, see LayerInfosDialog.js
      }, activeTopic);
      dispatch(setSelectedForInfos(isSelected ? null : selectedInfo));
      evt.stopPropagation();
    },
    "data-cy": "infos-button-".concat(selectedInfo.key || selectedInfo.name)
  }, /*#__PURE__*/React.createElement(FaInfoCircle, {
    focusable: false
  }));
}
InfosButton.propTypes = {
  // A topic or a layer
  selectedInfo: PropTypes.object.isRequired,
  className: PropTypes.string
};
export default /*#__PURE__*/React.memo(InfosButton);
//# sourceMappingURL=InfosButton.js.map