import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Feature from "ol/Feature";
import { Tabs, Tab } from "@mui/material";
import { makeStyles } from "@mui/styles";
import qs from "query-string";
import { Layer } from "mobility-toolbox-js/ol";
import useTranslation from "../../utils/useTranslation";
import Region from "./Region";
import Nl from "./Nl";
import Av from "./Av";
const PERMALINK_PARAM = "rkTab";
const TABS = ["region", "nl", "av"];
const useStyles = makeStyles(theme => ({
  tabPanel: {
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(2),
    paddingRight: theme.spacing(1),
    paddingLeft: theme.spacing(1),
    borderTop: "1px solid #dddddd",
    marginTop: -4
  },
  tab: {
    minWidth: 0
  }
}));
function RegionenkarteSegmentPopup(_ref) {
  let {
    layer,
    feature
  } = _ref;
  const {
    t
  } = useTranslation();
  const classes = useStyles();
  const accessType = layer.get("accessType") || "public";
  const isIntern = accessType === "intern";
  const parsed = qs.parseUrl(window.location.href);
  const [tab, setTab] = useState(parsed.query[PERMALINK_PARAM] || TABS[2]);
  const [avRole, setAvRole] = useState();
  const handleChange = (event, newTab) => {
    setTab(TABS[newTab]);
  };
  useEffect(() => {
    if (isIntern && tab !== parsed.query[PERMALINK_PARAM]) {
      parsed.query[PERMALINK_PARAM] = tab;
      window.history.replaceState(undefined, undefined, "?".concat(qs.stringify(parsed.query)));
    }
  }, [isIntern, parsed, tab]);
  useEffect(() => {
    let property;
    let value;
    if (tab === TABS[0]) {
      property = "region";
      value = feature.get("region");
    } else if (tab === TABS[1]) {
      property = "niederlassung_name";
      value = feature.get("niederlassung_name");
    } else if (tab === TABS[2]) {
      property = avRole;
      value = feature.get(avRole);
    }
    if (property && value) {
      layer.setHighlightFilter(["==", ["get", property], value]);
    }
    return () => layer.setHighlightFilter(null);
  }, [feature, isIntern, layer, layer.mapboxLayer, tab, avRole]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, isIntern && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
    value: TABS.indexOf(tab),
    onChange: handleChange,
    variant: "fullWidth",
    className: classes.tabs
  }, /*#__PURE__*/React.createElement(Tab, {
    className: classes.tab,
    label: t("Region")
  }), /*#__PURE__*/React.createElement(Tab, {
    className: classes.tab,
    label: t("Perimeter")
  }), /*#__PURE__*/React.createElement(Tab, {
    className: classes.tab,
    label: t("Av")
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.tabPanel
  }, tab === TABS[2] && /*#__PURE__*/React.createElement(Av, {
    layer: layer,
    feature: feature,
    onChangeRole: role => {
      setAvRole(role);
    }
  }), tab === TABS[1] && /*#__PURE__*/React.createElement(Nl, {
    layer: layer,
    feature: feature
  }), tab === TABS[0] && /*#__PURE__*/React.createElement(Region, {
    layer: layer,
    feature: feature
  }))), !isIntern && /*#__PURE__*/React.createElement(Av, {
    layer: layer,
    feature: feature,
    onChangeRole: role => {
      setAvRole(role);
    }
  }));
}
RegionenkarteSegmentPopup.propTypes = {
  layer: PropTypes.instanceOf(Layer).isRequired,
  feature: PropTypes.instanceOf(Feature).isRequired
};
RegionenkarteSegmentPopup.renderTitle = (feat, layer, t) => t("Detailinformationen");
export default RegionenkarteSegmentPopup;
//# sourceMappingURL=RegionenkarteSegmentPopup.js.map