function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/* eslint-disable react/prop-types */
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Typography, Box } from "@mui/material";
import { makeStyles } from "@mui/styles";
import Feature from "ol/Feature";
import { Point } from "ol/geom";
import { useSelector } from "react-redux";
import { unByKey } from "ol/Observable";
import useTranslation from "../../../utils/useTranslation";
import Link from "../../../components/Link";
import panCenterFeature from "../../../utils/panCenterFeature";
import useHasScreenSize from "../../../utils/useHasScreenSize";
const useStyles = makeStyles(theme => ({
  container: {
    padding: "0 8px 8px"
  },
  header: {
    marginTop: 5
  },
  row: {
    margin: 0,
    display: "flex",
    alignItems: "center",
    borderRadius: 4,
    "&:hover": {
      backgroundColor: theme.colors.lightGray
    }
  },
  routeStops: {
    fontWeight: "bold",
    marginBottom: 10
  },
  fromTo: {
    display: "flex",
    alignItems: "center"
  },
  route: {
    marginTop: 10
  },
  routeAbsolute: {
    position: "absolute",
    margin: "auto",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  routeIcon: {
    width: 20,
    minWidth: 20,
    height: 35,
    marginRight: 10,
    position: "relative",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  routeVertical: {
    width: 4,
    height: "100%"
  },
  routeVerticalFirst: {
    top: "50%",
    height: "50%"
  },
  routeVerticalLast: {
    height: "50%",
    marginTop: 0
  },
  routeCircleMiddle: {
    height: 6,
    width: 6,
    borderRadius: 6,
    border: "3px solid",
    backgroundColor: "#fff",
    opacity: 1,
    zIndex: 10
  },
  rowFirst: {
    fontSize: "1.1em"
  },
  rowLast: {
    fontSize: "1.1em"
  }
}));
const propTypes = {
  feature: PropTypes.instanceOf(Feature)
};
function DvLineInfo(_ref) {
  var _layer$highlightedSta;
  let {
    feature = null,
    layer
  } = _ref;
  const {
    t,
    i18n
  } = useTranslation();
  const classes = useStyles();
  const map = useSelector(state => state.app.map);
  const menuOpen = useSelector(state => state.app.menuOpen);
  const isMobile = useHasScreenSize();
  const [viaUid, setViaUid] = useState((_layer$highlightedSta = layer.highlightedStation) === null || _layer$highlightedSta === void 0 ? void 0 : _layer$highlightedSta.get("uid"));
  useEffect(() => {
    const highlightStationListener = layer.on("select:station", e => {
      var _e$feature;
      return setViaUid((_e$feature = e.feature) === null || _e$feature === void 0 ? void 0 : _e$feature.get("uid"));
    });
    return () => unByKey(highlightStationListener);
  }, [layer]);
  if (!feature) {
    return null;
  }
  const {
    vias,
    line,
    ["description_".concat(i18n.language)]: description,
    ["url_".concat(i18n.language)]: link,
    color
  } = (feature === null || feature === void 0 ? void 0 : feature.getProperties()) || {};
  return /*#__PURE__*/React.createElement("div", {
    className: classes.container
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.header
  }, /*#__PURE__*/React.createElement("i", null, line === "night" ? t("Nachtverbindung") : t("Tagverbindung")), description && /*#__PURE__*/React.createElement("p", null, description), link && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Link, {
    href: link
  }, t("Link zum Angebot")))), /*#__PURE__*/React.createElement("div", {
    className: classes.route
  }, vias.map((via, index, arr) => {
    let extraRowClass = "";
    let extraVerticalClass = "";
    const isFirst = index === 0;
    const isLast = index === arr.length - 1;
    const isSelected = via.uid === viaUid;
    const {
      coordinates
    } = via;
    if (isFirst) {
      extraRowClass = " ".concat(classes.rowFirst);
      extraVerticalClass = " ".concat(classes.routeVerticalFirst);
    } else if (isLast) {
      extraRowClass = " ".concat(classes.rowLast);
      extraVerticalClass = " ".concat(classes.routeVerticalLast);
    }
    return /*#__PURE__*/React.createElement(Box, {
      key: via.uid,
      className: classes.row + extraRowClass,
      style: {
        cursor: coordinates ? "pointer" : "auto"
      },
      onClick: () => {
        if (coordinates) {
          layer.highlightStation(new Feature(_objectSpread(_objectSpread({}, via), {}, {
            geometry: new Point(coordinates)
          })));
          setViaUid(via.uid);
          panCenterFeature(map, [layer], coordinates, !menuOpen,
          // default menuOpen to false
          isMobile, true,
          // useOverlay
          null, null, null, null, true);
        }
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.routeIcon
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(classes.routeAbsolute, " ").concat(classes.routeVertical).concat(extraVerticalClass),
      style: {
        backgroundColor: color
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: classes.routeCircleMiddle,
      style: {
        borderColor: isSelected ? "black" : color
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
      variant: isFirst || isLast ? "h4" : "body1"
    }, isSelected ? /*#__PURE__*/React.createElement("b", null, via.station_name) : via.station_name)));
  })));
}
DvLineInfo.propTypes = propTypes;
export default DvLineInfo;
//# sourceMappingURL=DvLineInfo.js.map