import React from "react";
import PropTypes from "prop-types";
import { Feature } from "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 SchmalspurLayer from "../../layers/SchmalspurLayer";
const useStyles = makeStyles(() => {
  return {
    row: {
      display: "flex",
      alignItems: "center",
      minHeight: 15,
      padding: "5px 0",
      "& img": {
        paddingRight: 5
      }
    }
  };
});
function SchmalspurPopup(_ref) {
  let {
    feature,
    layer
  } = _ref;
  const classes = useStyles();
  const {
    i18n,
    t
  } = useTranslation();
  const properties = feature.getProperties();
  const {
    isb_tu_nummer: tuNummer,
    mail_isb: mailIsb,
    phone_isb: phoneIsb
  } = properties;
  const phone = properties.phone || phoneIsb;
  const mail = properties.mail || mailIsb;
  const details = layer.tuInfos[tuNummer];
  const {
    name,
    long_name: longName
  } = details;
  const href = details["url_".concat(i18n.language)];
  return /*#__PURE__*/React.createElement("div", null, longName && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, t(longName)), href && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement(Link, {
    href: href
  }, t("zur Webseite von", {
    operator: t(name)
  }))), 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)));
}
SchmalspurPopup.propTypes = {
  feature: PropTypes.instanceOf(Feature).isRequired,
  layer: PropTypes.instanceOf(SchmalspurLayer).isRequired
};
export default /*#__PURE__*/React.memo(SchmalspurPopup);
//# sourceMappingURL=SchmalspurPopup.js.map