import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import Feature from "ol/Feature";
import { Layer } from "mobility-toolbox-js/ol";
import { MenuItem } from "@mui/material";
import { makeStyles } from "@mui/styles";
import qs from "query-string";
import useTranslation from "../../utils/useTranslation";
import Select from "../../components/Select";
import Person from "./Person";
import Line from "./Line";
import LineData from "./LineData";
const useStyles = makeStyles(theme => ({
  description: {
    flex: "0 0",
    "& > div:first-child": {
      paddingBottom: theme.spacing(2)
    }
  },
  menuItem: {
    width: props => props.selectWidth - 4,
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    display: "block"
  }
}));
const roles = ["av_bnb", "av_fahrbahn", "av_fahrstrom", "av_ingenieurbau", "av_natur", "av_bzu", "av_wasser", "av_abwasser", "av_bahntechnik"];
const PERMALINK_PARAM = "anlagegattung";
function Av(_ref) {
  let {
    layer,
    feature,
    onChangeRole
  } = _ref;
  const {
    t
  } = useTranslation();
  const cartaroUrl = useSelector(state => state.app.cartaroUrl);
  const accessType = layer.get("accessType") || "public";
  const isIntern = accessType === "intern";
  const parsed = qs.parseUrl(window.location.href);
  const permalinkParam = parsed.query[PERMALINK_PARAM];
  const [role, setRole] = useState(isIntern ? roles.includes(permalinkParam) && permalinkParam || roles[0] : "av_bnb");
  const [person, setPerson] = useState();
  const [lineData, setLineData] = useState();
  const [selectWidth, setSelectWidth] = useState();
  const classes = useStyles({
    selectWidth
  });
  useEffect(() => {
    const abortController = new AbortController();
    const str = feature.get(role);
    const newPerson = str && JSON.parse(str);
    setPerson(newPerson);
    if (newPerson && newPerson.email) {
      fetch("".concat(cartaroUrl, "anlagenverantwortliche/items/other_lines/?role=").concat(role.split("_")[1], "&email=").concat(newPerson.email, "&format=json"), {
        signal: abortController.signal
      }).then(resp => resp.json()).then(newLineData => {
        setLineData(newLineData);
      }).catch(err => {
        if (err && err.name === "AbortError") {
          // ignore user abort request
          return;
        }
        setLineData([]);
      });
    } else {
      setLineData([]);
    }
    return () => {
      abortController.abort();
    };
  }, [cartaroUrl, feature, role]);
  useEffect(() => {
    if (isIntern && role !== parsed.query[PERMALINK_PARAM]) {
      parsed.query[PERMALINK_PARAM] = role;
      window.history.replaceState(undefined, undefined, "?".concat(qs.stringify(parsed.query)));
    }
    onChangeRole(role);
  }, [parsed, role, onChangeRole, isIntern]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
    feature: feature
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.description,
    ref: el => setSelectWidth(el === null || el === void 0 ? void 0 : el.clientWidth)
  }, /*#__PURE__*/React.createElement("div", null, isIntern && /*#__PURE__*/React.createElement(Select, {
    value: role,
    onChange: evt => setRole(evt.target.value),
    fullWidth: true,
    MenuProps: {
      marginThreshold: 0
    },
    "data-cy": "av-role-select"
  }, [...roles].sort((a, b) => t(a) < t(b) ? -1 : 1).map(value => {
    return /*#__PURE__*/React.createElement(MenuItem, {
      key: value,
      value: value,
      className: classes.menuItem,
      title: t(value),
      "data-cy": "av-role-option-".concat(value)
    }, t(value));
  })), !isIntern && /*#__PURE__*/React.createElement("b", null, t(role === "av_bnb" ? "Koordinator Bahnnahes Bauen" : "Av")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Person, {
    person: person,
    isIntern: isIntern
  })), lineData && /*#__PURE__*/React.createElement(LineData, {
    lineData: lineData,
    style: {
      marginTop: 16
    }
  }));
}
Av.propTypes = {
  layer: PropTypes.instanceOf(Layer).isRequired,
  feature: PropTypes.instanceOf(Feature).isRequired,
  onChangeRole: PropTypes.func.isRequired
};
export default Av;
//# sourceMappingURL=Av.js.map