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); }
/* eslint-disable react/jsx-props-no-spreading */
import React, { useEffect, useCallback, useRef } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import { makeStyles } from "@mui/styles";
import { IconButton, Popper, Paper, Fade, List, ListItem, ListItemText, ClickAwayListener, Typography } from "@mui/material";
import useTranslation from "../../utils/useTranslation";
import { ReactComponent as QuestionIcon } from "../../img/circleQuestionMark.svg";
import { setSearchInfoOpen } from "../../model/app/actions";
import CloseButton from "../CloseButton";
import { trackEvent } from "../../utils/trackingUtils";
const useStyles = makeStyles(theme => {
  return {
    searchInfoOuterWrapper: {
      position: "absolute",
      right: 2,
      top: 0,
      height: 48,
      width: 48,
      display: "flex",
      alignItems: "center",
      backgroundColor: "white"
    },
    searchInfoInnerWrapper: {
      position: "relative"
    },
    searchInfoBtn: {
      padding: 10,
      color: theme.palette.text.secondary,
      "&:hover": {
        color: theme.palette.secondary.main
      }
    },
    popupHeader: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      paddingLeft: 10
    },
    closeBtn: {
      zIndex: 1500,
      padding: "4px 8px"
    },
    searchInfoBox: {
      zIndex: 1500,
      left: "10px !important",
      top: "-44px !important",
      width: "32vw",
      maxWidth: props => props.screenWidth !== "xl" ? 258 : 420
    },
    searchInfoContent: {
      padding: "5px 0",
      position: "relative",
      maxHeight: "90vh",
      "&::before": {
        content: '""',
        height: 0,
        width: 0,
        top: 13,
        left: -18,
        position: "absolute",
        border: "10px solid transparent",
        borderRight: "8px solid white",
        filter: "drop-shadow(-8px 2px 5px rgba(130,130,130,1))"
      }
    },
    searchInfoList: {
      maxHeight: "50vh",
      padding: "0 10px",
      overflow: "auto"
    }
  };
});
const propTypes = {
  anchorEl: PropTypes.instanceOf(Element)
};
function SearchInfo() {
  const dispatch = useDispatch();
  const {
    t
  } = useTranslation();
  const screenWidth = useSelector(state => state.app.screenWidth);
  const classes = useStyles({
    screenWidth
  });
  const searchOpen = useSelector(state => state.app.searchOpen);
  const searchInfoOpen = useSelector(state => state.app.searchInfoOpen);
  const activeTopic = useSelector(state => state.app.activeTopic);
  const anchorEl = useRef(null);
  const togglePopup = useCallback(() => {
    if (!searchInfoOpen) {
      trackEvent({
        eventType: "action",
        componentName: "search info button",
        label: t("Suche-Info"),
        location: t(activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.name, {
          lng: "de"
        }),
        variant: "Suche-Info"
      }, activeTopic);
    }
    dispatch(setSearchInfoOpen(!searchInfoOpen));
  }, [dispatch, searchInfoOpen, activeTopic, t]);
  useEffect(() => {
    // Ensure the popup is always closed on mount
    if (screenWidth !== "xl" && !searchOpen) {
      dispatch(setSearchInfoOpen(false));
    }
  }, [searchOpen, screenWidth, dispatch]);
  if (["s", "xs"].includes(screenWidth)) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: classes.searchInfoOuterWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.searchInfoInnerWrapper
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.searchInfoBtn,
    onClick: togglePopup,
    title: t("Suche-Info"),
    ref: anchorEl
  }, /*#__PURE__*/React.createElement(QuestionIcon, null)), anchorEl && /*#__PURE__*/React.createElement(Popper, {
    open: searchInfoOpen,
    anchorEl: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.current,
    transition: true,
    placement: "top-start",
    className: classes.searchInfoBox
  }, _ref => {
    let {
      TransitionProps
    } = _ref;
    return /*#__PURE__*/React.createElement(ClickAwayListener, {
      mouseEvent: "onMouseDown",
      touchEvent: "onTouchStart",
      onClickAway: () => dispatch(setSearchInfoOpen(false))
    }, /*#__PURE__*/React.createElement(Fade, _extends({}, TransitionProps, {
      timeout: searchOpen || screenWidth === "xl" ? 350 : 0
    }), /*#__PURE__*/React.createElement(Paper, {
      square: true,
      elevation: 4,
      className: classes.searchInfoContent
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.popupHeader
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "h4"
    }, t("Suche")), /*#__PURE__*/React.createElement(CloseButton, {
      onClick: togglePopup,
      className: classes.closeBtn
    })), /*#__PURE__*/React.createElement(List, {
      dense: true,
      disablePadding: true,
      className: classes.searchInfoList
    }, /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Stationen")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.stations.desc"))),
      secondary: "".concat(t("z.B."), " ").concat(t("search.info.stations.example"))
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Gemeinden")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.municipalities.desc"))),
      secondary: "".concat(t("z.B."), " \"Eriz\", \"Mesocco\"")
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Orte")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.places.desc"))),
      secondary: "".concat(t("z.B."), " \"Le Chasseron\", \"Passo del San Bernardino\", \"Louwibach\"")
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Adressen")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.addresses.desc"))),
      secondary: "".concat(t("z.B."), " \"Tr\xFCsselstrasse 2 3014 Bern\"")
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Betriebspunkte")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.operatingpoints.desc"))),
      secondary: "".concat(t("z.B."), " \"Aespli\" ").concat(t("oder"), " \"AESP\"")
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Linien")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.lines.desc"))),
      secondary: "".concat(t("z.B."), " \"210\"")
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Kilometerpunkt auf Linie")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.lineskilometer.desc"))),
      secondary: "".concat(t("z.B."), " \"210 +35.74\"")
    })), /*#__PURE__*/React.createElement(ListItem, {
      disableGutters: true
    }, /*#__PURE__*/React.createElement(ListItemText, {
      primary: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Typography, {
        component: "span",
        variant: "h4"
      }, t("Liniensegment")), ":", " ", /*#__PURE__*/React.createElement(Typography, {
        component: "span"
      }, t("search.info.linessegment.desc"))),
      secondary: "".concat(t("z.B."), " \"210 29.5-35.7\"")
    }))))));
  })));
}
SearchInfo.propTypes = propTypes;
export default SearchInfo;
//# sourceMappingURL=SearchInfo.js.map