import React, { useMemo, useCallback, useState, useEffect } from "react";
import PropTypes from "prop-types";
import makeStyles from "@mui/styles/makeStyles";
import Typography from "@mui/material/Typography";
import Feature from "ol/Feature";
import useTranslation from "../../utils/useTranslation";
import Dialog from "../../components/Dialog";
import PhotoCarusel from "../../components/PhotoCarusel";
const useStylesDialog = makeStyles(() => ({
  dialogRoot: {
    position: "fixed !important"
  },
  dialogContainer: {
    maxWidth: "clamp(300px, 90vw, 2000px)",
    maxHeight: "100%"
  },
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    gap: 25,
    maxWidth: "100%"
  }
}));
function MesswagenPhotosPopup(_ref) {
  let {
    feature = null
  } = _ref;
  const classesDialog = useStylesDialog();
  const {
    t
  } = useTranslation();
  const [fullSize, setFullSize] = useState(false);
  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
  const properties = (feature === null || feature === void 0 ? void 0 : feature.getProperties()) || {};
  const photos = useMemo(() => Array.from(Array(7).keys()).reduce((allPhotos, key) => {
    const featProps = (feature === null || feature === void 0 ? void 0 : feature.getProperties()) || {};
    const photo = featProps["foto_".concat(key + 1)];
    if (photo) {
      allPhotos.push(photo);
    }
    return allPhotos;
  }, []), [feature]);
  const getCurrentPhotoIndex = useCallback(index => setCurrentPhotoIndex(index), []);
  useEffect(() => {
    setCurrentPhotoIndex(0);
  }, [feature]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, properties.description && /*#__PURE__*/React.createElement(Typography, {
    paragraph: true
  }, properties.description), photos && /*#__PURE__*/React.createElement(PhotoCarusel, {
    photos: photos,
    onIncrement: getCurrentPhotoIndex,
    onDecrement: getCurrentPhotoIndex,
    onImageClick: () => setFullSize(true)
  })), fullSize && /*#__PURE__*/React.createElement(Dialog, {
    isModal: true,
    name: "messwagen-photos-dialog",
    title: /*#__PURE__*/React.createElement("span", null, "".concat(properties.bezeichnung, " - ").concat(t("Fotos"))),
    className: "tm-dialog-container",
    classes: {
      root: classesDialog.dialogRoot,
      paper: classesDialog.dialogContainer
    },
    onClose: () => setFullSize(false),
    body: /*#__PURE__*/React.createElement("div", {
      className: classesDialog.container
    }, /*#__PURE__*/React.createElement(PhotoCarusel, {
      photos: photos,
      initialPhotoIndex: currentPhotoIndex
    }))
  }));
}
MesswagenPhotosPopup.propTypes = {
  feature: PropTypes.instanceOf(Feature)
};
MesswagenPhotosPopup.renderTitle = feature => feature.get("bezeichnung") || "";
export default MesswagenPhotosPopup;
//# sourceMappingURL=MesswagenPhotosPopup.js.map