import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import Feature from "ol/Feature";
import useTranslation from "../../utils/useTranslation";
import PopupElement from "./HandicapPopupElement";
import Link from "../../components/Link";
const propTypes = {
  feature: PropTypes.instanceOf(Feature).isRequired,
  descId: PropTypes.string
};
function HandicapPopup(_ref) {
  let {
    feature,
    descId
  } = _ref;
  const language = useSelector(state => state.app.language);
  const properties = feature.getProperties();
  const {
    t
  } = useTranslation();
  const refBody = useRef();
  const parsedTouristOffers = properties.barrierefreie_touristische_angebote && (typeof properties.barrierefreie_touristische_angebote === "string" || properties.barrierefreie_touristische_angebote instanceof String) // Ensure property value is defined and of type string
  ? JSON.parse(properties.barrierefreie_touristische_angebote) : [];
  useEffect(() => {
    // focus first element to trigger screenreader to read its content:
    // https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
    if (refBody && refBody.current) {
      refBody.current.focus();
    }
  }, []);

  // mapping of all boolean values properties and their exceptions
  const bfEquipmentExceptions = {
    perronhoehe_P55: "ausnahme_zu_P55_".concat(language),
    rampe: "ausnahme_zu_rampe_und_treppe_".concat(language),
    lift_zu_perron: "standort_zu_lift_".concat(language),
    taktile_sicherheitslinien: null,
    rollstuhl_billet: null,
    induktionsverstaerker: null,
    rollstuhl_wc: null,
    eurokey_wc: null,
    sbb_rollstuhl: null,
    mobilift: "sektor_".concat(language),
    faltrampe: null
  };

  // build string for equipment
  const equipment = [];
  const treppenfreiString = "".concat(t("treppenfrei")).concat(properties[bfEquipmentExceptions.rampe] && !properties.rampe ? " (".concat(properties[bfEquipmentExceptions.rampe], ")") : "");
  equipment.unshift(properties.treppenfrei ? treppenfreiString : t("nicht treppenfrei"));
  Object.keys(bfEquipmentExceptions).forEach(key => {
    if (properties[key]) {
      let str = t(key);
      if (bfEquipmentExceptions[key]) {
        // handle exception texts
        const exception = properties[bfEquipmentExceptions[key]];
        str += exception ? " (".concat(exception, ")") : "";
      }
      equipment.push(str);
    }
  });
  const behigInfo = () => {
    const status = properties.status_bahnhof;
    if (status === "OK") {
      return t("Dieser Bahnhof ist barrierefrei.");
    }
    if (status === "NOCH NICHT OK") {
      const prognose = properties.prognose === "nach 2026" ? "".concat(t("behig_nach"), " 2026") : properties.prognose;
      return "".concat(t("Dieser Bahnhof wird vollst\xE4ndig angepasst"), ": ").concat(prognose, " (").concat(t("Prognose"), ").");
    }
    if (status === "BLEIBEN NICHT OK") {
      return t("Dieser Bahnhof wird nicht baulich angepasst.");
    }
    return t("Keine Information vorhanden.");
  };
  const equipmentStr = equipment.length ? /*#__PURE__*/React.createElement("div", {
    className: "wkp-handicap-popup-element",
    key: "Ausstattung"
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-handicap-popup-field-title"
  }, t("Ausstattung")), /*#__PURE__*/React.createElement("div", {
    className: "wkp-handicap-popup-field-body"
  }, equipment.join(", "))) : null;
  const elementsList = [{
    label: "Treffpunkt",
    propertyName: "treffpunkt_".concat(language)
  }, {
    label: "Voranmeldefrist",
    propertyName: "voranmeldefrist_".concat(language)
  }, {
    label: "Ausstattung",
    element: equipmentStr
  }, {
    key: "behigInfo",
    element: /*#__PURE__*/React.createElement("div", {
      className: "wkp-handicap-popup-element",
      key: "BehigInfo"
    }, /*#__PURE__*/React.createElement("div", {
      className: "wkp-handicap-popup-field-title"
    }, t("ch.sbb.behig")), /*#__PURE__*/React.createElement("span", null, behigInfo()))
  }, {
    label: "Aktuell",
    propertyName: "aktuell_".concat(language)
  }, {
    key: "touristOffers",
    element: (parsedTouristOffers === null || parsedTouristOffers === void 0 ? void 0 : parsedTouristOffers.length) && parsedTouristOffers.find(p => p["label_".concat(language)]) && /*#__PURE__*/React.createElement("div", {
      className: "wkp-handicap-popup-element",
      key: "TouristischeAngebote"
    }, /*#__PURE__*/React.createElement("div", {
      className: "wkp-handicap-popup-field-title"
    }, t("Barrierefreie touristische Angebote")), parsedTouristOffers.filter(offer => offer["label_".concat(language)]).map((offer, index) => {
      return /*#__PURE__*/React.createElement("span", {
        key: offer.label_de || offer.label_fr || offer.label_it
      }, /*#__PURE__*/React.createElement(Link, {
        href: offer["url_".concat(language)]
      }, offer["label_".concat(language)]), index !== parsedTouristOffers.length - 1 && /*#__PURE__*/React.createElement("br", null));
    }))
  }];
  const renderBottom = props => {
    if (["zusaetzliche_informationen_".concat(language), "beschreibung_zur_dritte_dienstleistung_".concat(language)].every(val => Object.keys(props).includes(val) && props[val] !== "")) {
      return /*#__PURE__*/React.createElement("div", {
        className: "wkp-handicap-popup-bottom"
      }, /*#__PURE__*/React.createElement(PopupElement, {
        key: "beschreibung_zur_dritte_dienstleistung_".concat(language),
        label: t("Dritte Dienstleistung"),
        properties: props,
        propertyName: "beschreibung_zur_dritte_dienstleistung_".concat(language)
      }), /*#__PURE__*/React.createElement(PopupElement, {
        key: "Zus\xE4tzliche Informationen",
        label: t("Zusätzliche Informationen"),
        properties: props,
        propertyName: "zusaetzliche_informationen_".concat(language)
      }));
    }
    if (Object.keys(props).includes("zusaetzliche_informationen_".concat(language)) &&
    // eslint-disable-next-line react/destructuring-assignment
    props["zusaetzliche_informationen_".concat(language)] !== "") {
      return /*#__PURE__*/React.createElement(PopupElement, {
        key: "Zus\xE4tzliche Informationen",
        label: t("Zusätzliche Informationen"),
        properties: props,
        propertyName: "zusaetzliche_informationen_".concat(language)
      });
    }
    return /*#__PURE__*/React.createElement(PopupElement, {
      key: "beschreibung_zur_dritte_dienstleistung",
      label: t("Dritte Dienstleistung"),
      properties: props,
      propertyName: "beschreibung_zur_dritte_dienstleistung_".concat(language)
    });
  };
  const titles = [];
  if (properties.barrierefreier_bahnhof !== null) {
    titles.push(properties.barrierefreier_bahnhof ? t("Barrierefreier Bahnhof") : t("Nicht barrierefreier Bahnhof"));
  }
  const renderBody = () => {
    if (properties.noInfo) {
      return /*#__PURE__*/React.createElement("span", {
        tabIndex: -1,
        ref: refBody
      }, t("Keine Information vorhanden."));
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
      className: "wkp-handicap-popup-title",
      ref: refBody,
      tabIndex: -1
    }, titles.join(" / ")), elementsList.map(field => {
      if (!properties[field.propertyName] && !field.element) {
        return null;
      }
      return field.element || /*#__PURE__*/React.createElement(PopupElement, {
        key: field.label || field.key,
        label: t(field.label),
        properties: properties,
        propertyName: field.propertyName.replace("{language}", language)
      });
    }), renderBottom(properties));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "wkp-handicap-popup",
    style: {
      minWidth: properties.noInfo ? "250px" : "350px"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-handicap-popup-body",
    id: descId
  }, renderBody()));
}
HandicapPopup.propTypes = propTypes;
const memoized = /*#__PURE__*/React.memo(HandicapPopup);
memoized.renderTitle = feat => feat.get("stationsbezeichnung");
export default memoized;
//# sourceMappingURL=HandicapPopup.js.map