/* eslint-disable no-param-reassign */
import React, { useEffect, useState, useMemo } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import { makeStyles } from "@mui/styles";
import { FormGroup, FormControlLabel } from "@mui/material";
import { unByKey } from "ol/Observable";
import useTranslation from "../../utils/useTranslation";
import SBBSwitch from "../../components/SBBSwitch";
import { DV_DAY_NIGHT_REGEX } from "../../utils/constants";
import { setFeatureInfo } from "../../model/app/actions";
import DvLegendLine from "../../config/ch.sbb.direktverbindungen/DvLegendLine/DvLegendLine";
import useHasScreenSize from "../../utils/useHasScreenSize";
const useStyles = makeStyles(() => {
  return {
    switchWrapper: {
      "& label:first-child": {
        marginRight: 20
      },
      "& .MuiFormControlLabel-label": {
        fontSize: 16
      },
      "& .MuiFormControlLabel-root": {
        minWidth: 155
      },
      "& .MuiSwitch-switchBase": {
        top: props => props.isMobile && props.row ? 4 : 0
      }
    },
    disabled: {
      cursor: "not-allowed",
      "& .MuiButtonBase-root": {
        cursor: "not-allowed"
      },
      "& .MuiSwitch-root": {
        opacity: 0.6
      }
    },
    label: {
      display: "flex",
      alignItems: "center",
      gap: 10,
      "& span": {
        minWidth: 80
      }
    }
  };
});
function DvSwitcherLabel(_ref) {
  let {
    title,
    color
  } = _ref;
  const classes = useStyles({
    color
  });
  return /*#__PURE__*/React.createElement("span", {
    className: classes.label
  }, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement(DvLegendLine, {
    color: color
  }));
}
DvSwitcherLabel.propTypes = {
  title: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired
};
function DvLayerSwitcher(_ref2) {
  let {
    onToggle,
    row = false
  } = _ref2;
  const {
    t
  } = useTranslation();
  const [revision, forceRender] = useState();
  const dispatch = useDispatch();
  const layers = useSelector(state => state.map.layers);
  const featureInfo = useSelector(state => state.app.featureInfo);
  const isMobile = useHasScreenSize();
  const classes = useStyles({
    isMobile,
    row
  });
  const dvLayers = useMemo(() => layers.filter(layer => {
    return DV_DAY_NIGHT_REGEX.test(layer.key);
  }), [layers]);
  const layersVisible = dvLayers.filter(l => l.visible).map(l => l.key);

  // Force render when visibility changes
  useEffect(() => {
    const olKeys = (layers === null || layers === void 0 ? void 0 : layers.map(layer => {
      return layer === null || layer === void 0 ? void 0 : layer.on("change:visible", () => {
        forceRender(revision + 1);
      });
    })) || [];

    // Force render after first render because visibility of layers is  not yet applied.
    if (revision === undefined) {
      forceRender(0);
    }
    return () => {
      unByKey(olKeys);
    };
  }, [layers, revision]);
  useEffect(() => {
    // If the switcher configuration filters out all features from list
    // (e.g. when both layers are deactivated) we remove the featureInfo
    if (featureInfo.length) {
      const regex = new RegExp("".concat(layersVisible[0].split(".").pop()));
      const featureIncludesDvLine = !(layersVisible !== null && layersVisible !== void 0 && layersVisible.length) || layersVisible.length === 1 && !featureInfo[0].features.some(feat => regex.test(feat.get("data_variant")));
      if (featureIncludesDvLine) {
        dispatch(setFeatureInfo([]));
      }
    }
  }, [dispatch, featureInfo, layersVisible]);
  return /*#__PURE__*/React.createElement(FormGroup, {
    "data-testid": "dv-layerswitcher",
    row: row,
    className: classes.switchWrapper
  }, dvLayers.map(layer => {
    const disabled = layer.visible && (layersVisible === null || layersVisible === void 0 ? void 0 : layersVisible.length) === 1;
    return /*#__PURE__*/React.createElement(FormControlLabel, {
      className: disabled ? classes.disabled : undefined,
      key: layer.key,
      label: /*#__PURE__*/React.createElement(DvSwitcherLabel, {
        title: t(layer.name),
        color: layer.get("color")
      }),
      checked: layersVisible.includes(layer.key),
      control: /*#__PURE__*/React.createElement(SBBSwitch, {
        key: layer.key,
        value: layer.key,
        "data-testid": "dv-layerswitcher-".concat(layer.key),
        onChange: () => {
          if (disabled) return;
          layer.visible = !layer.visible;
          onToggle === null || onToggle === void 0 || onToggle(layer);
        }
      })
    });
  }));
}
DvLayerSwitcher.propTypes = {
  onToggle: PropTypes.func,
  row: PropTypes.bool
};
export default DvLayerSwitcher;
//# sourceMappingURL=DvLayerSwitcher.js.map