/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState } from "react";
import PropTypes from "prop-types";
import Feature from "ol/Feature";
import { useSelector } from "react-redux";
import { transform as transformCoords } from "ol/proj";
import { Link as MuiLink } from "@mui/material";
import useTranslation from "../../utils/useTranslation";
import Link from "../../components/Link";
import BahnhofplanPopup from "../BahnhofplanPopup";
import coordinateHelper from "../../utils/coordinateHelper";
import DeparturePopup from "../DeparturePopup";
import CloseButton from "../../components/CloseButton";
const propTypes = {
  feature: PropTypes.instanceOf(Feature).isRequired,
  coordinate: PropTypes.arrayOf(PropTypes.number).isRequired
};
function NetzkartePopup(_ref) {
  let {
    feature,
    coordinate
  } = _ref;
  const [showPlanLinks, setShowPlanLinks] = useState(true);
  const [showCoordinates, setShowCoordinates] = useState(false);
  const [showDepartures, setShowDepartures] = useState(feature === null || feature === void 0 ? void 0 : feature.get("showDepartures"));
  const projection = useSelector(state => state.app.projection);
  const {
    t
  } = useTranslation();
  const {
    name,
    latitude,
    longitude,
    altitude,
    sbb_id: sbbId,
    layer,
    rail,
    ferry,
    country_code: countryCode,
    url_interactive_plan: iabpUrl,
    url_a4: a4Url,
    url_poster: posterUrl,
    url_shopping: shoppingUrl,
    url_bep: bepUrl
  } = feature.getProperties();
  let airportLabel = null;
  let stationTimetableLink = null;
  let stationServiceLink = null;
  let bepLink = null;
  let transportLink = null;
  const hasPlanLinks = !!iabpUrl || !!a4Url || !!posterUrl || !!shoppingUrl;
  let styleLayer = layer || (rail ? "railway" : "");
  if (ferry) {
    styleLayer = "ship";
  }

  // TODO: verify that this code is used, it seems the airport label is never displayed.
  // because there is no translations with flug text and the indexOf test seems wrong
  // (it should be > -1).
  const isAirport = styleLayer && styleLayer.indexOf("flug") > 0;
  const floatSbbId = parseFloat(sbbId);
  const didok = countryCode && countryCode === "CH" || !countryCode && floatSbbId >= 8500000 && /^85/.test(sbbId) ? floatSbbId - 8500000 : null;
  if (bepUrl) {
    bepLink = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Link, {
      href: bepUrl
    }, " ", t("url_bep")));
  }
  if (Number.isFinite(didok)) {
    transportLink = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      tabIndex: 0,
      role: "button",
      onClick: () => setShowDepartures(true),
      onKeyPress: () => setShowDepartures(true),
      className: "wkp-departure-btn"
    }, t("Abfahrtszeiten")));
  }
  if (isAirport) {
    airportLabel = /*#__PURE__*/React.createElement("div", null, t(styleLayer));
  }
  if (name && !isAirport) {
    const stationTimetableUrl = t("station_timetable_url").replace("{stationname}", encodeURIComponent(name));
    stationTimetableLink = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Link, {
      href: stationTimetableUrl
    }, " ", t("Fahrplan")));
  }

  // We want certain links only for swiss stations.
  if (Number.isFinite(didok) && styleLayer === "railway") {
    const stationServiceUrl = t("station_service_url").replace("{didok}", encodeURIComponent(didok));
    stationServiceLink = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Link, {
      href: stationServiceUrl
    }, " ", t("Webseite Bahnhof")));
  }

  // The feature is not necessarly a point.
  // If it's the case and if there is no properties, we use the coordinate of the click event
  let pointCoordinate = [0, 0];
  if (longitude && latitude) {
    pointCoordinate = transformCoords([parseFloat(longitude, 10), parseFloat(latitude, 10)], "EPSG:4326", projection.value);
  } else if (feature.getGeometry().getType() === "Point") {
    pointCoordinate = transformCoords(feature.getGeometry().getCoordinates(), "EPSG:3857", projection.value);
  } else if (coordinate) {
    pointCoordinate = transformCoords(coordinate, "EPSG:3857", projection.value);
  }
  const formatedCoords = projection.value === "EPSG:4326" ? coordinateHelper.wgs84Format(pointCoordinate, ",") : coordinateHelper.meterFormat(pointCoordinate);
  const coordinatesWrapper = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    tabIndex: 0,
    role: "button",
    "aria-expanded": showCoordinates,
    className: "wkp-coordinate-toggle",
    onClick: () => setShowCoordinates(!showCoordinates),
    onKeyPress: () => setShowCoordinates(!showCoordinates)
  }, t("Koordinaten")), /*#__PURE__*/React.createElement("div", {
    className: "wkp-coordinates-infos".concat(showCoordinates ? "" : " wkp-closed")
  }, /*#__PURE__*/React.createElement("span", {
    className: "wkp-projection-label"
  }, projection.label), /*#__PURE__*/React.createElement("span", null, "".concat(t("Länge"), " (X): ").concat(formatedCoords[0])), /*#__PURE__*/React.createElement("span", null, "".concat(t("Breite"), " (Y): ").concat(formatedCoords[1])), altitude && /*#__PURE__*/React.createElement("span", null, "".concat(t("Höhe"), ": ").concat(altitude, "m"))));
  return showDepartures ? /*#__PURE__*/React.createElement(DeparturePopup, {
    feature: feature,
    coordinate: coordinate
  }, /*#__PURE__*/React.createElement(CloseButton, {
    size: "small",
    style: {
      position: "absolute",
      top: 0,
      right: 0,
      padding: "4px 0px",
      height: 25,
      width: 25
    },
    onClick: () => {
      setShowDepartures(false);
    }
  })) : /*#__PURE__*/React.createElement("div", {
    className: "wkp-netzkarte-popup"
  }, airportLabel, hasPlanLinks ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MuiLink, {
    onClick: () => {
      setShowPlanLinks(!showPlanLinks);
    },
    "aria-expanded": showPlanLinks,
    className: "wkp-popup-plans",
    tabIndex: "0"
  }, t("Bahnhofpläne"))), /*#__PURE__*/React.createElement("div", {
    className: "wkp-bahnhofplan-links".concat(showPlanLinks ? " wkp-visible" : "")
  }, /*#__PURE__*/React.createElement(BahnhofplanPopup, {
    feature: feature
  }))) : null, bepLink, stationTimetableLink, transportLink, stationServiceLink, coordinatesWrapper);
}
NetzkartePopup.propTypes = propTypes;
const memoized = /*#__PURE__*/React.memo(NetzkartePopup);
memoized.renderTitle = (feat, layer, t) => {
  const {
    name,
    platform
  } = feat.getProperties();
  if (platform) {
    return "".concat(name, " (").concat(t("abfahrtszeiten_kante"), " ").concat(platform, ")");
  }
  return name;
};
export default memoized;
//# sourceMappingURL=NetzkartePopup.js.map