/* eslint-disable no-param-reassign */
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { Box } from "@mui/material";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import IframeMenu from "../IframeMenu";
import { RailplusPopup } from "../../popups";
import { setFeatureInfo } from "../../model/app/actions";
import useHasScreenSize from "../../utils/useHasScreenSize";
import usePanCenterFeature from "../../utils/usePanCenterFeature";
import CloseButton from "../../components/CloseButton";
const useStyles = makeStyles(() => {
  return {
    listHeader: {
      paddingLeft: props => props.isMobile ? 0 : 15,
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      backgroundColor: "#f5f5f5",
      borderBottom: "1px solid #F0F0F0"
    }
  };
});
function RailplusMenu() {
  var _featureInfo$, _featureInfo$2;
  const dispatch = useDispatch();
  const {
    t
  } = useTranslation();
  const isMobile = useHasScreenSize();
  const classes = useStyles({
    isMobile
  });
  const featureInfo = useSelector(state => state.app.featureInfo);
  const feature = (_featureInfo$ = featureInfo[0]) === null || _featureInfo$ === void 0 ? void 0 : _featureInfo$.features[0];
  const layer = (_featureInfo$2 = featureInfo[0]) === null || _featureInfo$2 === void 0 ? void 0 : _featureInfo$2.layer;
  usePanCenterFeature();
  if (!feature || !layer) {
    return null;
  }
  return /*#__PURE__*/React.createElement(IframeMenu, {
    ResizableProps: {
      defaultSize: {
        height: "auto"
      }
    },
    title: /*#__PURE__*/React.createElement(Box, {
      className: classes.listHeader
    }, /*#__PURE__*/React.createElement("b", null, t(layer.key)), !isMobile && /*#__PURE__*/React.createElement(CloseButton, {
      size: "medium",
      style: {
        width: 40,
        height: 40
      },
      title: t("Schliessen"),
      onClick: () => {
        dispatch(setFeatureInfo());
      }
    })),
    body: /*#__PURE__*/React.createElement("div", {
      style: {
        padding: 15,
        maxHeight: isMobile ? undefined : "calc(100vh - 80px)",
        overflow: isMobile ? undefined : "auto"
      }
    }, /*#__PURE__*/React.createElement(RailplusPopup, {
      feature: feature,
      layer: layer
    }))
  });
}
export default RailplusMenu;
//# sourceMappingURL=RailplusMenu.js.map