import React, { useMemo } from "react";
import { useSelector } from "react-redux";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import TarifverbundPartner from "../../components/TarifverbundPartner";
import useFetch from "../../utils/useFetch";
import useHasScreenSize from "../../utils/useHasScreenSize";
const useStyles = makeStyles(() => {
  return {
    legend: {
      display: "grid",
      gridTemplateColumns: props => props.isMobile ? "1fr 1fr" : "200px 200px",
      gap: 5
    }
  };
});
function TarifVerbundLegend() {
  const {
    t
  } = useTranslation();
  const vectorTilesUrl = useSelector(state => state.app.vectorTilesUrl);
  const apiKey = useSelector(state => state.app.apiKey);
  const isMobile = useHasScreenSize();
  const classes = useStyles({
    isMobile
  });
  const {
    data: style,
    loading
  } = useFetch("".concat(vectorTilesUrl, "/styles/ch.sbb.tarifverbund/style.json?key=").concat(apiKey));
  const verbunde = useMemo(() => {
    var _style$metadata;
    return style === null || style === void 0 || (_style$metadata = style.metadata) === null || _style$metadata === void 0 || (_style$metadata = _style$metadata.partners) === null || _style$metadata === void 0 ? void 0 : _style$metadata.sort((a, b) => a.name.localeCompare(b.name));
  }, [style]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.legend,
    "data-testid": "tarifverbund-legend-container"
  }, loading ? "".concat(t("Wird geladen"), "...") : null, !loading && (verbunde || []).length ? /*#__PURE__*/React.createElement(React.Fragment, null, verbunde.map(v => /*#__PURE__*/React.createElement(TarifverbundPartner, {
    key: v.name,
    color: v.verbund_colour_hex ? "#".concat(v.verbund_colour_hex) : null,
    label: v.name
  })), /*#__PURE__*/React.createElement(TarifverbundPartner, {
    style: {
      background: "repeating-linear-gradient(45deg, transparent, transparent 2px, #bd9189 2px, #bd9189 4px)"
    },
    label: "Z-Pass"
  })) : null);
}
export default TarifVerbundLegend;
//# sourceMappingURL=TarifVerbundLegend.js.map