import React from "react";
import PropTypes from "prop-types";
import { Feature } from "ol";
import { Layer } from "mobility-toolbox-js/ol";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import Link from "../../components/Link";
import phoneIcon from "../../img/popups/NetzentwicklungPopup/phone.svg";
import mailIcon from "../../img/popups/NetzentwicklungPopup/mail.svg";
import useHighlightSomeFeatures from "../../utils/useHighlightSomeFeatures";
const useStyles = makeStyles(() => {
  return {
    row: {
      display: "flex",
      alignItems: "center",
      minHeight: 15,
      padding: "5px 0",
      "& img": {
        paddingRight: 5
      }
    }
  };
});
const urlIsDefined = url => !!url;
const getUrls = (properties, language) => {
  let value = properties["url_isb_".concat(language)];
  const urls = JSON.parse(value || "[]");
  if (urls.some(urlIsDefined)) {
    return urls.filter(urlIsDefined);
  }
  // If there are no urls in the current language default to first defined
  const linkKeys = Object.keys(properties).filter(key => /url_isb_/.test(key));
  value = properties[linkKeys.find(key => JSON.parse(properties[key]).some(urlIsDefined))];
  return urls.filter(urlIsDefined);
};
const propTypes = {
  feature: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Feature)), PropTypes.instanceOf(Feature)]).isRequired,
  layer: PropTypes.instanceOf(Layer).isRequired
};
const translations = {
  de: {
    vorgabenUrl: "https://vorgaben.sbb.ch/inhalte/18027?jump-to=&regulation-redirect=0"
  },
  fr: {
    vorgabenUrl: "https://vorgaben.sbb.ch/fr/contenu/18027?jump-to=&regulation-redirect=0"
  },
  it: {
    vorgabenUrl: "https://vorgaben.sbb.ch/it/contenuti/18027?jump-to=&regulation-redirect=0"
  },
  en: {
    vorgabenUrl: "https://vorgaben.sbb.ch/en/content/18027?jump-to=&regulation-redirect=0"
  }
};
function IsbPopup(_ref) {
  let {
    feature,
    layer
  } = _ref;
  const classes = useStyles();
  const {
    i18n,
    t
  } = useTranslation();
  const shortToLongName = layer.get("shortToLongName") || {};
  const properties = feature.getProperties();
  const {
    phone_isb: phone,
    mail_isb: mail,
    isb_tu_name: operator
  } = feature.getProperties();
  const urls = getUrls(properties, i18n.language) || [];
  const mainUrl = urls[0];
  const secondaryUrl = urls[1];
  // Character case of operator could change in the future, so we prevent futur errors using a regex.
  const operatorLongName = (Object.entries(shortToLongName).find(_ref2 => {
    let [key] = _ref2;
    return new RegExp("^".concat(operator, "$"), "i").test(key);
  }) || [])[1] || operator;

  // Highlight only the feature display in the feature information
  useHighlightSomeFeatures([feature], layer);
  return /*#__PURE__*/React.createElement("div", null, operatorLongName && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, "".concat(t("bei"), " ").concat(t(operatorLongName), ".")), mainUrl && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement(Link, {
    href: mainUrl
  }, t("zur Webseite von", {
    operator: t(operator)
  }))), secondaryUrl && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /(networkstatement|vorgaben)/.test(secondaryUrl) ? /*#__PURE__*/React.createElement(Link, {
    href: translations[i18n.language].vorgabenUrl
  }, "www.networkstatement.ch") : /*#__PURE__*/React.createElement(Link, {
    href: secondaryUrl
  }, t("weitere Informationen von", {
    operator: t(operator)
  }))), phone && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("img", {
    src: phoneIcon,
    alt: "Phone"
  }), /*#__PURE__*/React.createElement("a", {
    href: "tel:".concat(phone)
  }, phone)), mail && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("img", {
    src: mailIcon,
    alt: "Mail"
  }), /*#__PURE__*/React.createElement("a", {
    href: "mailto:".concat(mail),
    rel: "noopener noreferrer",
    target: "_blank"
  }, mail)));
}
IsbPopup.propTypes = propTypes;
IsbPopup.renderTitle = (feat, layer, t) => {
  return t("Informationen zum Netzzugang bei");
};
export default IsbPopup;
//# sourceMappingURL=IsbPopup.js.map