import React from "react";
import PropTypes from "prop-types";
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import { lightingMapping } from "../BeleuchtungLayerInfo/lightingMapping";
import LegendCircle from "../../components/LegendCircle/LegendCircle";
const useStyles = makeStyles(() => {
  return {
    legendWrapper: {
      margin: "10px 0"
    },
    legendRow: {
      display: "grid",
      gridTemplateColumns: "auto 1fr",
      gridGap: 10,
      alignItems: "center",
      minHeight: 70,
      "& svg": {
        marginRight: 10
      }
    },
    subtext: {
      color: "#888",
      fontSize: 12
    }
  };
});
export function BeleuchtungLegendeRow(_ref) {
  let {
    lightClass
  } = _ref;
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/React.createElement("div", {
    className: classes.legendRow,
    key: lightClass
  }, /*#__PURE__*/React.createElement(LegendCircle, {
    fillColor: lightingMapping[lightClass].color,
    radius: 15,
    borderWidth: 3
  }, /*#__PURE__*/React.createElement("b", {
    style: {
      color: lightClass.match(/(3|4|2b)/) && "white",
      fontSize: 16
    }
  }, lightClass)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    variant: "h4"
  }, "".concat(t("Bahnhofklasse"), " ").concat(lightClass)), t(lightingMapping[lightClass].info[1]), " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
    className: classes.subtext
  }, "".concat(lightingMapping[lightClass].info[0], " ").concat(t("Passagiere/Tag")))));
}
BeleuchtungLegendeRow.propTypes = {
  lightClass: PropTypes.string.isRequired
};
function BeleuchtungLegende() {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement("div", {
    className: classes.legendWrapper
  }, Object.keys(lightingMapping).sort().map(lightClass => {
    return /*#__PURE__*/React.createElement(BeleuchtungLegendeRow, {
      lightClass: lightClass,
      key: lightClass
    });
  }));
}
export default BeleuchtungLegende;
//# sourceMappingURL=BeleuchtungLegende.js.map