import React, { useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Box } from "@mui/material";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../../utils/useTranslation";
import { DV_KEY } from "../../../utils/constants";
import useHasScreenSize from "../../../utils/useHasScreenSize";
import { setFeatureInfo } from "../../../model/app/actions";
import CloseButton from "../../../components/CloseButton";
const useStyles = makeStyles(() => {
  return {
    listHeader: {
      paddingLeft: 15,
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      backgroundColor: "#f5f5f5",
      borderBottom: "1px solid #F0F0F0"
    }
  };
});
export const DvFeatureInfoTitleString = () => {
  var _dvMainLayer$highligh;
  const {
    t
  } = useTranslation();
  const layers = useSelector(state => state.map.layers);
  const dvMainLayer = useMemo(() => layers.find(l => l.key === "".concat(DV_KEY, ".main")), [layers]);
  const stationName = dvMainLayer === null || dvMainLayer === void 0 || (_dvMainLayer$highligh = dvMainLayer.highlightedStation) === null || _dvMainLayer$highligh === void 0 ? void 0 : _dvMainLayer$highligh.get("name");
  return "".concat(t("Direktverbindungen"), " ").concat(stationName ? " ".concat(t("über"), " ").concat(stationName) : "");
};
function DvFeatureInfoTitle() {
  const dispatch = useDispatch();
  const classes = useStyles();
  const isMobile = useHasScreenSize();
  const layers = useSelector(state => state.map.layers);
  const dvMainLayer = useMemo(() => layers.find(l => l.key === "".concat(DV_KEY, ".main")), [layers]);
  return isMobile ? /*#__PURE__*/React.createElement(DvFeatureInfoTitleString, null) : /*#__PURE__*/React.createElement(Box, {
    className: classes.listHeader
  }, /*#__PURE__*/React.createElement("b", null, /*#__PURE__*/React.createElement(DvFeatureInfoTitleString, null)), /*#__PURE__*/React.createElement(CloseButton, {
    onClick: () => {
      dvMainLayer.highlightStation();
      dispatch(setFeatureInfo());
    }
  }));
}
export default DvFeatureInfoTitle;
//# sourceMappingURL=DvFeatureInfoTitle.js.map