import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@mui/styles";
import Feature from "ol/Feature";
import { Layer } from "mobility-toolbox-js/ol";
import { Typography, List, ListItem, ListItemText, ListItemIcon } from "@mui/material";
import { FaCircle } from "react-icons/fa";
import useTranslation from "../../utils/useTranslation";
import GeltungsbereicheLegend, { getLegends } from "./GeltungsbereicheLegend";
import { infos } from "../../layerInfos/GeltungsbereicheLayerInfo/GeltungsbereicheLayerInfo";
const propTypes = {
  feature: PropTypes.arrayOf(PropTypes.instanceOf(Feature)).isRequired,
  layer: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
  renderValidityFooter: PropTypes.bool
};
const useStyles = makeStyles(theme => ({
  legendItem: {
    display: "flex",
    alignItems: "center",
    gap: 15,
    padding: "10px 0"
  },
  listItem: {
    padding: "0 10px 0",
    alignItems: "start",
    maxWidth: 280
  },
  listItemIcon: {
    marginTop: 8,
    minWidth: 20,
    color: theme.palette.text.primary
  }
}));
const translations = {
  de: {
    "Information gilt für diese Produkte": "Information gilt für diese Produkte"
  },
  en: {
    "Information gilt für diese Produkte": "Information applies to these products"
  },
  fr: {
    "Information gilt für diese Produkte": "L'information s'applique à ces produits"
  },
  it: {
    "Information gilt für diese Produkte": "Informazioni applicabili a questi prodotti"
  }
};
function GeltungsbereichePopup(_ref) {
  var _infos$layer$get;
  let {
    feature: features,
    layer: layers,
    renderValidityFooter = true
  } = _ref;
  const {
    t,
    i18n
  } = useTranslation();
  const classes = useStyles();
  const layer = layers[0];
  const products = layer.get("products") || [];
  const productsRemark = layer.get("productsRemark");
  const validPropertyName = layer.get("validPropertyName");
  const getTextFromValid = layer.get("getTextFromValid") || (valid => {
    let text = "Keine Ermässigung";
    if (valid === 50 || valid === 25) {
      text = "Fahrt zum ermässigten Preis";
    }
    if (valid === 100) {
      text = "Freie Fahrt";
    }
    if (valid === -1) {
      text = "Gültigkeit vor Ort erfragen";
    }
    return text;
  });
  const lineDashArray50 = layer.get("lineDashArray50");
  const lineDashArray25 = layer.get("lineDashArray25");
  const legends = getLegends(lineDashArray50, lineDashArray25);

  // Keep same mot order as in the legends
  const featuresByMot = {};
  legends.forEach(legend => {
    if (legend.mots.length) {
      featuresByMot[legend.mots[0]] = {};
    }
  });
  (features || []).forEach(feat => {
    let mot = feat.get("mot");
    if (/^(tram|subway)$/.test(mot)) {
      mot = "rail";
    }
    if (mot === "funicular") {
      mot = "gondola";
    }
    if (!featuresByMot[mot]) {
      featuresByMot[mot] = {};
    }
    if (!featuresByMot[mot][feat.get(validPropertyName)]) {
      featuresByMot[mot][feat.get(validPropertyName)] = feat;
    }
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, Object.entries(featuresByMot).map(_ref2 => {
    let [mot, validGa] = _ref2;
    return Object.entries(validGa).sort((_ref3, _ref4) => {
      let [keyA] = _ref3;
      let [keyB] = _ref4;
      if (parseInt(keyA, 10) === -1) {
        return 1;
      }
      if (parseInt(keyB, 10) === -1) {
        return -1;
      }
      if (keyA > keyB) {
        return 1;
      }
      if (keyA < keyB) {
        return -1;
      }
      return 0;
    }).map(_ref5 => {
      let [, feature] = _ref5;
      const valid = feature.get(validPropertyName);
      const text = getTextFromValid(valid);
      return /*#__PURE__*/React.createElement("div", {
        key: mot + valid,
        className: classes.legendItem
      }, /*#__PURE__*/React.createElement(GeltungsbereicheLegend, {
        mot: feature.get("mot"),
        valid: valid,
        background: true,
        lineDashArray50: lineDashArray50,
        lineDashArray25: lineDashArray25
      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
        variant: "h4"
      }, t("gb.mot.".concat(mot))), /*#__PURE__*/React.createElement(Typography, {
        variant: "subtitle1"
      }, t(text))));
    });
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.legendItem
  }, /*#__PURE__*/React.createElement(GeltungsbereicheLegend, {
    background: true
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "subtitle1"
  }, t(((_infos$layer$get = infos[layer.get("cardsScope")]) === null || _infos$layer$get === void 0 ? void 0 : _infos$layer$get["0"]) || "Keine Ermässigung"))), renderValidityFooter && !!products.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
    variant: "h4"
  }, translations[i18n.language]["Information gilt für diese Produkte"], ":"), /*#__PURE__*/React.createElement(List, {
    dense: true
  }, products.map(product => {
    return /*#__PURE__*/React.createElement(ListItem, {
      className: classes.listItem,
      key: product
    }, /*#__PURE__*/React.createElement(ListItemIcon, {
      className: classes.listItemIcon
    }, /*#__PURE__*/React.createElement(FaCircle, {
      size: 7
    })), /*#__PURE__*/React.createElement(ListItemText, {
      primaryTypographyProps: {
        variant: "body1"
      }
    },
    /*#__PURE__*/
    // eslint-disable-next-line react/no-danger
    React.createElement("span", {
      dangerouslySetInnerHTML: {
        __html: t(product)
      }
    }) // For proper line breaks
    ));
  })), !!productsRemark && /*#__PURE__*/React.createElement(Typography, {
    variant: "body1"
  }, t(productsRemark))));
}
GeltungsbereichePopup.propTypes = propTypes;
GeltungsbereichePopup.renderTitle = (feat, layer, t) => {
  return t("ch.sbb.geltungsbereiche");
};
GeltungsbereichePopup.hidePagination = true;
export default GeltungsbereichePopup;
//# sourceMappingURL=GeltungsbereicheGaPopup.js.map