import React, { useState, useEffect, useMemo } from "react";
import { useSelector } from "react-redux";
import { FaDownload, FaInfoCircle } from "react-icons/fa";
import { makeStyles } from "@mui/styles";
import Typography from "@mui/material/Typography";
import useTranslation from "../../utils/useTranslation";
import MenuItem from "../../components/Menu/MenuItem";
import ExportButton from "../../components/ExportButton";
import ExportResolutionSelect from "./ExportResolutionSelect";
import useExportPrintOptions from "../../utils/useExportPrintOptions";
import { sizesByFormat, optionsA0, optionsA1 } from "../../utils/exportUtils";
const useStyles = makeStyles(theme => ({
  menuContent: {
    padding: 16,
    overflow: "hidden"
  },
  selectWrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    marginLeft: 20,
    gap: 15
  },
  selectResolution: {
    width: 145
  },
  input: {
    width: 140,
    height: 44
  },
  infoWrapper: {
    display: "flex",
    alignItems: "start",
    margin: "10px 0"
  },
  infoIcon: {
    marginRight: theme.spacing(1),
    flexShrink: 0,
    paddingTop: 3,
    color: theme.palette.text.secondary
  }
}));
const options = [...optionsA0, ...optionsA1];
function ExportMenu() {
  const classes = useStyles();
  const activeTopic = useSelector(state => state.app.activeTopic);
  const menuOpen = useSelector(state => state.app.menuOpen);
  const collapsedOnLoad = useMemo(() => {
    var _activeTopic$elements;
    return ((_activeTopic$elements = activeTopic.elements.exportMenu) === null || _activeTopic$elements === void 0 ? void 0 : _activeTopic$elements.collapsedOnLoad) || false;
  }, [activeTopic]);
  const [collapsed, setCollapsed] = useState(collapsedOnLoad);
  const {
    t
  } = useTranslation();
  const exportPrintOptions = useExportPrintOptions(options);
  useEffect(() => {
    // Open menu item when loading/switching topic
    if (menuOpen) {
      setCollapsed(collapsedOnLoad);
    }
  }, [menuOpen, collapsedOnLoad]);
  if (!exportPrintOptions) return null;
  return /*#__PURE__*/React.createElement(MenuItem, {
    open: true,
    className: "wkp-export-menu",
    title: t("Grossformatiges PDF exportieren"),
    icon: /*#__PURE__*/React.createElement(FaDownload, {
      focusable: false
    }),
    collapsed: collapsed,
    onCollapseToggle: c => setCollapsed(c),
    fixedHeight: 200
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.menuContent
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.selectWrapper
  }, /*#__PURE__*/React.createElement(ExportResolutionSelect, {
    options: options,
    className: classes.selectResolution
  }), /*#__PURE__*/React.createElement(ExportButton, {
    exportFormat: exportPrintOptions.paperSize,
    exportScale: exportPrintOptions.quality,
    exportSize: sizesByFormat[exportPrintOptions.paperSize]
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.infoWrapper
  }, /*#__PURE__*/React.createElement(FaInfoCircle, {
    focusable: false,
    fontSize: "small",
    className: classes.infoIcon
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    variant: "subtitle1"
  }, t("Die maximal auswählbare dpi hängt von der Browser-Einstellung ab.")), /*#__PURE__*/React.createElement(Typography, {
    variant: "subtitle1"
  }, t("Tipp: Verwenden Sie den Firefox-Browser für den Export hochauflösender Karten."))))));
}
export default /*#__PURE__*/React.memo(ExportMenu);
//# sourceMappingURL=ExportMenu.js.map