import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
const useStyles = makeStyles(() => ({
  legendWrapper: {
    margin: "10px 0"
  },
  legendLine: {
    display: "flex",
    alignItems: "center",
    paddingBottom: 5,
    "& svg": {
      paddingRight: 10
    },
    "& span": {
      maxWidth: "85%"
    }
  },
  punctualityCharacter: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    paddingRight: 10,
    color: "red",
    fontSize: 30,
    fontWeight: "bold",
    "-webkit-text-stroke": "1px black",
    height: 23,
    width: 23
  }
}));
const propTypes = {
  t: PropTypes.func.isRequired
};
function PunctualityLayerInfo() {
  const {
    t,
    i18n
  } = useTranslation();
  const classes = useStyles();
  const delays = [{
    color: "#00a00c",
    // green
    legend: "ch.sbb.puenktlichkeit-ontime"
  }, {
    color: "#f7bf00",
    // yellow
    legend: "ch.sbb.puenktlichkeit-medium-delay"
  }, {
    color: "#e13f20",
    // red
    legend: "ch.sbb.puenktlichkeit-high-delay"
  }, {
    dashed: true,
    color: "#a0a0a0",
    // grey
    legend: "ch.sbb.puenktlichkeit-journey-no-realtime"
  }, {
    color: "#a0a0a0",
    // grey
    legend: "ch.sbb.puenktlichkeit-company-no-realtime"
  }, {
    character: String.fromCodePoint(0x00d7),
    legend: "Ausfall"
  }];
  const legend = /*#__PURE__*/React.createElement("div", {
    className: classes.legendWrapper
  }, delays.map(d => /*#__PURE__*/React.createElement("div", {
    className: "tm-punctuality-delay ".concat(classes.legendLine),
    key: d.legend
  }, d.character ? /*#__PURE__*/React.createElement("span", {
    className: classes.punctualityCharacter
  }, d.character) : /*#__PURE__*/React.createElement("svg", {
    height: "23",
    width: "23"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "11",
    cy: "11",
    r: "10",
    fill: d.color,
    strokeWidth: "1.5",
    stroke: "#404040",
    strokeDasharray: d.dashed ? "5 3" : null
  })), /*#__PURE__*/React.createElement("span", null, t(d.legend)))));
  const comps = {
    de: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Der Zugtracker zeigt die aktuellen Verbindungen basierend auf dem Soll- und Ist-Fahrplan des Schweizer \xD6V."), legend, /*#__PURE__*/React.createElement("p", null, "Daten:\xA0", /*#__PURE__*/React.createElement("a", {
      href: "https://opentransportdata.swiss/",
      rel: "noopener noreferrer",
      target: "_blank"
    }, "opentransportdata.swiss"), ".")),
    fr: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Le train tracker indique les trajets en cours en se basant sur l\u2019horaire th\xE9orique et r\xE9el des transports publiques suisses."), legend, /*#__PURE__*/React.createElement("p", null, "Donn\xE9es:\xA0", /*#__PURE__*/React.createElement("a", {
      href: "https://opentransportdata.swiss/",
      rel: "noopener noreferrer",
      target: "_blank"
    }, "opentransportdata.swiss"), ".")),
    en: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "The train tracker shows current connections based on the planned and actual timetable for Swiss public transport."), legend, /*#__PURE__*/React.createElement("p", null, "Data:\xA0", /*#__PURE__*/React.createElement("a", {
      href: "https://opentransportdata.swiss/",
      rel: "noopener noreferrer",
      target: "_blank"
    }, "opentransportdata.swiss"), ".")),
    it: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Il train tracker mostra i collegamenti aggiornati sulla base dell\u2019orario teorico e attuale dei trasporti pubblici svizzeri."), legend, /*#__PURE__*/React.createElement("p", null, "Dati:\xA0", /*#__PURE__*/React.createElement("a", {
      href: "https://opentransportdata.swiss/",
      rel: "noopener noreferrer",
      target: "_blank"
    }, "opentransportdata.swiss"), "."))
  };
  return comps[i18n.language];
}
PunctualityLayerInfo.propTypes = propTypes;
export default PunctualityLayerInfo;
//# sourceMappingURL=PunctualityLayerInfo.js.map