/* eslint-disable react/no-danger */
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import "./MapsGeoAdminLayerInfo.scss";
import useTranslation from "../../utils/useTranslation";
const propTypes = {
  properties: PropTypes.object.isRequired
};
const footer = {
  de: /*#__PURE__*/React.createElement("span", null, "Mehr Informationen unter", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://map.geo.admin.ch/?topic=bafu&lang=de",
    target: "_blank",
    rel: "noreferrer"
  }, "map.geo.admin.ch")),
  fr: /*#__PURE__*/React.createElement("span", null, "Plus informations sur", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://map.geo.admin.ch/?topic=bafu&lang=fr",
    target: "_blank",
    rel: "noreferrer"
  }, "map.geo.admin.ch")),
  it: /*#__PURE__*/React.createElement("span", null, "Pi\xFA informazioni su", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://map.geo.admin.ch/?topic=bafu&lang=it",
    target: "_blank",
    rel: "noreferrer"
  }, "map.geo.admin.ch")),
  en: /*#__PURE__*/React.createElement("span", null, "More information at", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://map.geo.admin.ch/?topic=bafu&lang=en",
    target: "_blank",
    rel: "noreferrer"
  }, "map.geo.admin.ch"))
};
function MapsGeoAdminLayerInfo(_ref) {
  var _legendHtml$getElemen;
  let {
    properties
  } = _ref;
  const {
    t,
    language
  } = useTranslation();
  const [legendHtml, setLegendHtml] = useState(null);
  useEffect(() => {
    const fetchLegend = () => {
      const legendKey = properties.get("legendKey");
      fetch("https://api3.geo.admin.ch/rest/services/all/MapServer/".concat(legendKey, "/legend?lang=").concat(language)).then(res => res.text()).then(text => {
        const node = document.createElement("div");
        node.innerHTML = text;
        setLegendHtml(node);
      });
    };
    fetchLegend();
  }, [language, properties]);
  return /*#__PURE__*/React.createElement("div", {
    className: "wkp-maps-geo-admin-layer-info"
  }, legendHtml && /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: legendHtml.innerHTML
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "wkp-maps-geo-admin-layer-info-footer"
  }, /*#__PURE__*/React.createElement("p", {
    className: "bod-title"
  }, /*#__PURE__*/React.createElement("span", null, t("Legende"))), legendHtml && /*#__PURE__*/React.createElement("div", {
    className: "wkp-maps-geo-admin-layer-info-img",
    dangerouslySetInnerHTML: {
      __html: (_legendHtml$getElemen = legendHtml.getElementsByClassName("img-container")[0]) === null || _legendHtml$getElemen === void 0 ? void 0 : _legendHtml$getElemen.innerHTML
    }
  }), footer[language]));
}
MapsGeoAdminLayerInfo.propTypes = propTypes;
export default MapsGeoAdminLayerInfo;
//# sourceMappingURL=MapsGeoAdminLayerInfo.js.map