import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { Feature } from "ol";
import { List, ListItem, ListItemIcon, ListItemText, Typography } from "@mui/material";
import { FaCircle } from "react-icons/fa";
import { useSelector } from "react-redux";
import { LineString } from "ol/geom";
import { containsExtent } from "ol/extent";
import useTranslation from "../../utils/useTranslation";
import RailplusLayer from "../../layers/RailplusLayer";
import PhotoCarusel from "../../components/PhotoCarusel";
import useHasScreenSize from "../../utils/useHasScreenSize";
function useZoomOnProvider(bbox) {
  const map = useSelector(state => state.app.map);
  const isMobile = useHasScreenSize();
  useEffect(() => {
    if (!map || !bbox) return;
    // calculate extent with open overlay
    const extent = map.getView().calculateExtent(map.getSize());
    const leftBottomPixel = map.getPixelFromCoordinate([extent[0], extent[1]]);
    const leftBottomCoordWithOverlay = map.getCoordinateFromPixel([isMobile ? leftBottomPixel[0] : leftBottomPixel[0] + 400, isMobile ? leftBottomPixel[1] + 200 : leftBottomPixel[1]]);
    const visibleMapExtent = new LineString([leftBottomCoordWithOverlay, [extent[2], extent[3]]]).getExtent();
    // only zoom if bbox is partly obscured by map edge or overlay
    if (!containsExtent(visibleMapExtent, bbox)) {
      const padding = isMobile ? [50, 50, 200, 50] : [100, 100, 100, 400];
      map.getView().fit(bbox, {
        duration: 1000,
        padding,
        maxZoom: map.getView().getZoom()
      });
    }
  }, [bbox, map, isMobile]);
}
function RailplusPopup(_ref) {
  let {
    feature,
    layer
  } = _ref;
  const {
    t
  } = useTranslation();
  const {
    long_name: longName,
    location_headquarter: address,
    logo,
    picture,
    name,
    cantons,
    highest_point: highestPoint,
    lowest_point: lowestPoint,
    number_of_employees: numberOfEmployees,
    yearly_number_of_passengers: yearlyNumberOfPassengers,
    route_length: routeLength,
    bbox
  } = layer.railplusProviders[feature.get("isb_tu_nummer")] || {};
  useZoomOnProvider(bbox);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 20,
      marginBottom: 50
    }
  }, logo && /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 15,
      display: "flex"
    },
    "data-testid": "railplus-logo"
  }, /*#__PURE__*/React.createElement("img", {
    src: logo,
    alt: "".concat(name, "_logo"),
    style: {
      maxWidth: "100%"
    }
  })), longName && /*#__PURE__*/React.createElement(Typography, {
    component: "b",
    variant: "body2",
    "data-testid": "railplus-longname"
  }, longName), address && /*#__PURE__*/React.createElement("div", {
    "data-testid": "railplus-address"
  }, /*#__PURE__*/React.createElement(Typography, {
    sx: {
      paddingBottom: 0.5
    }
  }, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".headquarters")), ":")), /*#__PURE__*/React.createElement(Typography, null, address)), cantons !== null && cantons !== void 0 && cantons.length ? /*#__PURE__*/React.createElement("div", {
    "data-testid": "railplus-cantons"
  }, /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".cantons"))), ":"), /*#__PURE__*/React.createElement(List, {
    "data-testid": "railplus-cantons-list",
    dense: true
  }, cantons.map(canton => ({
    abr: canton,
    trans: t("kantone.".concat(canton.toLowerCase()))
  })).sort((a, b) => a.trans.localeCompare(b.trans)) // We sort the translated cantons
  .map(_ref2 => {
    let {
      abr,
      trans
    } = _ref2;
    return /*#__PURE__*/React.createElement(ListItem, {
      key: abr,
      dense: true,
      "data-testid": "railplus-cantons-listitem-".concat(abr.toLowerCase())
    }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(FaCircle, {
      size: 7
    })), /*#__PURE__*/React.createElement(ListItemText, {
      sx: {
        margin: 0
      }
    }, trans));
  }))) : null, numberOfEmployees && /*#__PURE__*/React.createElement(Typography, {
    "data-testid": "railplus-employees"
  }, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".number_of_employees"))), ": ", numberOfEmployees), yearlyNumberOfPassengers && /*#__PURE__*/React.createElement(Typography, {
    "data-testid": "railplus-passengers"
  }, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".yearly_number_of_passengers"))), ":", " ", yearlyNumberOfPassengers), routeLength && /*#__PURE__*/React.createElement(Typography, {
    "data-testid": "railplus-route"
  }, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".length"))), ": ", routeLength), highestPoint && /*#__PURE__*/React.createElement(Typography, {
    "data-testid": "railplus-highest"
  }, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".highest_point"))), ": ", highestPoint), lowestPoint && /*#__PURE__*/React.createElement(Typography, {
    "data-testid": "railplus-lowest"
  }, /*#__PURE__*/React.createElement("b", null, t("".concat(layer.key, ".lowest_point"))), ": ", lowestPoint), picture && /*#__PURE__*/React.createElement(PhotoCarusel, {
    photos: [picture]
  }));
}
RailplusPopup.propTypes = {
  feature: PropTypes.instanceOf(Feature).isRequired,
  layer: PropTypes.instanceOf(RailplusLayer).isRequired
};
export default /*#__PURE__*/React.memo(RailplusPopup);
//# sourceMappingURL=RailplusPopup.js.map