import React, { useEffect, useMemo } from "react";
import PropTypes from "prop-types";
import Feature from "ol/Feature";
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import Link from "../../components/Link";
import TarifverbundkarteLayer from "../../layers/TarifverbundkarteLayer";
import TarifverbundPartner from "../../components/TarifverbundPartner";
const useStyles = makeStyles(() => ({
  zone: {
    margin: "8px 0"
  },
  zoneNumber: {
    color: "#888",
    fontSize: 12
  }
}));
const propTypes = {
  feature: PropTypes.instanceOf(Feature).isRequired,
  layer: PropTypes.instanceOf(TarifverbundkarteLayer).isRequired
};
function TarifverbundkartePopup(_ref) {
  let {
    feature,
    layer
  } = _ref;
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  const properties = feature.getProperties();
  const {
    zPass,
    zones,
    partners_json: partners
  } = properties;
  const verbunde = useMemo(() => JSON.parse(partners), [partners]);
  useEffect(() => {
    layer.set("clicked", false);
    return () => {
      /**
       * When the unmount happens due to a click on the map (with the clicked property === true),
       * the deselection is handled in TarifverbundkarteLayer. If the "x"-Button in the popup is clicked
       * it is handled here.
       * @ignore
       */
      if (!layer.get("clicked")) {
        layer.removeSelection();
      }
    };
  });
  if (!zones && !(zPass !== null && zPass !== void 0 && zPass.tarifverbund_urls)) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "wkp-tarifverbundkarte-popup"
  }, verbunde !== null && verbunde !== void 0 && verbunde.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
    variant: "h4"
  }, /*#__PURE__*/React.createElement("b", null, t("Tarifverbunde in ".concat(feature.get("name"))))), verbunde.filter(v => !!(v.url && v.name && v.colour)).map(v => {
    return /*#__PURE__*/React.createElement(TarifverbundPartner, {
      iconSize: 12,
      key: v.code,
      color: "#".concat(v.colour),
      label: "".concat(v.name)
    }, /*#__PURE__*/React.createElement(Link, {
      href: v.url
    }, v.name));
  }), (zPass === null || zPass === void 0 ? void 0 : zPass.tarifverbund_urls) && /*#__PURE__*/React.createElement(TarifverbundPartner, {
    iconSize: 12,
    style: {
      background: "repeating-linear-gradient(45deg, transparent, transparent 2px, #bd9189 2px, #bd9189 4px)"
    },
    label: "Z-Pass"
  }, /*#__PURE__*/React.createElement(Link, {
    href: zPass === null || zPass === void 0 ? void 0 : zPass.tarifverbund_urls
  }, "Z-Pass")), /*#__PURE__*/React.createElement("br", null)) : null, zones ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
    variant: "h4"
  }, /*#__PURE__*/React.createElement("b", null, t("Ausgewählte Zonen"))), zones.map(tarifZone => {
    return /*#__PURE__*/React.createElement("div", {
      className: classes.zone,
      key: tarifZone.id
    }, /*#__PURE__*/React.createElement(Typography, null, tarifZone.verbund), /*#__PURE__*/React.createElement("div", {
      className: classes.zoneNumber
    }, "".concat(t("Zone"), " ").concat(tarifZone.zone)));
  })) : null);
}
TarifverbundkartePopup.propTypes = propTypes;
const memoized = /*#__PURE__*/React.memo(TarifverbundkartePopup);
memoized.renderTitle = feat => feat.get("name");
export default memoized;
//# sourceMappingURL=TarifverbundkartePopup.js.map