import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import Point from "ol/geom/Point";
import { Divider, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import Link from "../../components/Link";
import usePrevious from "../../utils/usePrevious";
import GeltungsbereichePopup from "../../popups/GeltungsbereicheGaPopup/GeltungsbereicheGaPopup";
import { OTHER_LAYER_KEY, ROUTES_HIGHLIGHT_LAYER_KEY } from "../../config/ch.sbb.sts";
import { parseFeaturesInfos } from "./stsParseFeatureInfo";
import { setFeatureInfo } from "../../model/app/actions";
import useFetch from "../../utils/useFetch";
const useStyles = makeStyles(() => {
  return {
    featureInfoItem: {
      padding: "0 5px 10px"
    },
    mainInfo: {
      padding: "0 10px"
    },
    gbLegend: {
      padding: 10
    },
    imageLine: {
      margin: "5px 0",
      "& img": {
        width: "100%"
      }
    },
    container: {
      height: "calc(100% - 17px)",
      overflow: "auto"
    }
  };
});
function StsValidityFeatureInfo() {
  var _gbFeatureInfo$featur, _gbFeatureInfo$featur2, _gbFeatureInfo$featur3;
  const classes = useStyles();
  const dispatch = useDispatch();
  const layers = useSelector(state => state.map.layers);
  const featureInfo = useSelector(state => state.app.featureInfo);
  const [selectedFeature, setSelectedFeature] = useState();
  const previousSelectedFeature = usePrevious(selectedFeature);
  const mainFeatureInfos = useMemo(() => featureInfo.filter(info => info.layer.key !== OTHER_LAYER_KEY), [featureInfo]);
  const gbFeatureInfo = useMemo(() => featureInfo.find(info => info.layer.key === OTHER_LAYER_KEY), [featureInfo]);
  const {
    data: tours
  } = useFetch("https://maps.trafimage.ch/sts-static/tours.json");
  const select = useCallback(feature => {
    const highlightRoutes = layers.find(l => l.key === ROUTES_HIGHLIGHT_LAYER_KEY);
    if (previousSelectedFeature) {
      previousSelectedFeature.set("selected", false);
    }
    if (!feature) {
      highlightRoutes.highlightRoutes([]);
      return;
    }
    highlightRoutes.highlightRoutes([feature.get("title")], feature.get("routeProperty") || null);
    setSelectedFeature(feature);
  }, [previousSelectedFeature, layers]);
  const mainFeatures = useMemo(() => {
    var _features$;
    const features = mainFeatureInfos !== null && mainFeatureInfos !== void 0 && mainFeatureInfos.length && tours !== null && tours !== void 0 && tours.length ? parseFeaturesInfos(mainFeatureInfos, tours) : [];
    // When a POI highlight is selected we only display the first one, with lines we display all
    return ((_features$ = features[0]) === null || _features$ === void 0 ? void 0 : _features$.getGeometry()) instanceof Point ? [features[0]] : features;
  }, [mainFeatureInfos, tours]);
  const prevMainFeatures = usePrevious(mainFeatures);
  useEffect(() => {
    if (!(mainFeatures !== null && mainFeatures !== void 0 && mainFeatures.length)) {
      select();
    }
    if (mainFeatures !== prevMainFeatures) {
      setSelectedFeature();
    }
    if (mainFeatures && selectedFeature === undefined) {
      setSelectedFeature(mainFeatures[0]);
      select(mainFeatures[0]);
    }
  }, [mainFeatures, prevMainFeatures, selectedFeature, select]);

  // Unhighlight on unmount
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => () => select(), []);

  // Unhighlight and clear the feature info if there is no feature to display
  if (!(gbFeatureInfo !== null && gbFeatureInfo !== void 0 && (_gbFeatureInfo$featur = gbFeatureInfo.features) !== null && _gbFeatureInfo$featur !== void 0 && _gbFeatureInfo$featur.length) && !(mainFeatures !== null && mainFeatures !== void 0 && mainFeatures.length)) {
    dispatch(setFeatureInfo([]));
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: classes.container
  }, gbFeatureInfo !== null && gbFeatureInfo !== void 0 && (_gbFeatureInfo$featur2 = gbFeatureInfo.features) !== null && _gbFeatureInfo$featur2 !== void 0 && _gbFeatureInfo$featur2.length ? /*#__PURE__*/React.createElement("div", {
    className: classes.gbLegend
  }, /*#__PURE__*/React.createElement(GeltungsbereichePopup, {
    feature: gbFeatureInfo.features.filter(feat => feat.get("mot")),
    layer: [gbFeatureInfo.layer],
    renderValidityFooter: false
  })) : null, gbFeatureInfo !== null && gbFeatureInfo !== void 0 && (_gbFeatureInfo$featur3 = gbFeatureInfo.features) !== null && _gbFeatureInfo$featur3 !== void 0 && _gbFeatureInfo$featur3.length && mainFeatures.length ? /*#__PURE__*/React.createElement(Divider, null) : null, mainFeatures !== null && mainFeatures !== void 0 && mainFeatures.length ? mainFeatures.map((feat, idx, array) => {
    const title = feat.get("title") || feat.get("route_names_gttos");
    const images = feat.get("images") && feat.get("images").length;
    const description = feat.get("lead_text");
    const highlightUrl = feat.get("highlight_url");
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: title
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.mainInfo,
      "data-testid": "sts-validity-feature-info"
    }, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
      className: classes.featureInfoItem
    }, /*#__PURE__*/React.createElement(Typography, {
      paragraph: true,
      variant: "h4"
    }, title), images ? /*#__PURE__*/React.createElement("div", {
      className: classes.imageLine
    }, /*#__PURE__*/React.createElement("a", {
      href: highlightUrl,
      rel: "noopener noreferrer",
      target: "_blank"
    }, /*#__PURE__*/React.createElement("img", {
      src: feat.get("images")[0].url,
      alt: title
    }))) : null, description && /*#__PURE__*/React.createElement(Typography, {
      paragraph: true
    }, description), highlightUrl && /*#__PURE__*/React.createElement(Link, {
      href: highlightUrl
    }, "Details"))), array.length > 1 && idx !== array.length - 1 ? /*#__PURE__*/React.createElement(Divider, null) : null);
  }) : null);
}
export default StsValidityFeatureInfo;
//# sourceMappingURL=StsValidityFeatureInfo.js.map