import React, { useMemo, useState } from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@mui/styles";
import { useSelector } from "react-redux";
import { Checkbox, FormControlLabel, Typography } from "@mui/material";
import useTranslation from "../../utils/useTranslation";
import Dialog from "../../components/Dialog";
import ExportResolutionSelect from "../ExportMenu/ExportResolutionSelect";
import { optionsA3, optionsA4, sizesByFormat } from "../../utils/exportUtils";
import ExportButton from "../../components/ExportButton/ExportButton";
import useExportPrintOptions from "../../utils/useExportPrintOptions";
import gbLegends from "../../img/geltungsbereicheLegends";
import { SWISS_CENTER } from "../../utils/constants";
const useStylesBody = makeStyles(() => ({
  resSelect: {
    width: 190
  },
  mainBody: {
    display: "flex",
    flexDirection: "column",
    gap: 25
  },
  footer: {
    padding: "10px 0",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end"
  },
  checkboxLabel: {
    padding: "10px 0 10px 10px"
  }
}));
const useStylesDialog = makeStyles(() => ({
  dialogRoot: {
    position: "fixed !important"
  },
  dialogContainer: {
    maxWidth: 500
  }
}));
const options = [...optionsA3, ...optionsA4].filter(opt => /^(2|3)$/.test(opt.quality));
function GaExportMenu(_ref) {
  var _useSelector;
  let {
    onClose = null
  } = _ref;
  const {
    i18n,
    t
  } = useTranslation();
  const classesBody = useStylesBody();
  const classesDialog = useStylesDialog();
  const exportPrintOptions = useExportPrintOptions(options);
  const zoom = useSelector(state => state.map.zoom);
  const map = useSelector(state => state.app.map);
  const layers = (_useSelector = useSelector(state => state.app.activeTopic)) === null || _useSelector === void 0 ? void 0 : _useSelector.layers;
  const [exportFullMap, setExportFullMap] = useState(false);
  const visibleLayerName = useMemo(() => {
    var _layers$find;
    return (_layers$find = layers.find(l => !l.get("isBaseLayer") && l.visible)) === null || _layers$find === void 0 ? void 0 : _layers$find.name;
  }, [layers]);
  const exportCoordinates = useMemo(() => {
    const viewCenter = map === null || map === void 0 ? void 0 : map.getView().getCenter();
    return [viewCenter, viewCenter];
  }, [map]);
  const pdfSize = useMemo(() => {
    return sizesByFormat[exportPrintOptions === null || exportPrintOptions === void 0 ? void 0 : exportPrintOptions.paperSize];
  }, [exportPrintOptions]);
  const mapSize = useMemo(() => {
    if (!exportPrintOptions || !pdfSize) return null;
    let scale = 1;
    if (exportFullMap) {
      scale = exportPrintOptions.paperSize === "a3" ? 1.95 : 2.25; // Magic scale factor to fit the map to pdf format
    }
    return [pdfSize[0] * scale, pdfSize[1] * scale];
  }, [exportFullMap, exportPrintOptions, pdfSize]);
  const scaleLineConfig = useMemo(() => {
    var _gbLegends$find;
    if (!exportPrintOptions || !pdfSize) return null;
    const getScaleLinePositionFunc = (_gbLegends$find = gbLegends.find(l => l.validity === visibleLayerName && l.paperSize === exportPrintOptions.paperSize && l.language === i18n.language)) === null || _gbLegends$find === void 0 ? void 0 : _gbLegends$find.getScaleLinePosition;
    const scaleLinePosition = getScaleLinePositionFunc ? getScaleLinePositionFunc(pdfSize, exportPrintOptions.quality) : null;
    return scaleLinePosition;
  }, [exportPrintOptions, pdfSize, visibleLayerName, i18n.language]);
  const exportZoom = useMemo(() => {
    if (!exportPrintOptions || !exportFullMap) return zoom;
    return exportPrintOptions.paperSize === "a3" ? 9.3 : 9;
  }, [exportFullMap, exportPrintOptions, zoom]);
  return /*#__PURE__*/React.createElement(Dialog, {
    isModal: true,
    name: "ga-export-menu",
    title: /*#__PURE__*/React.createElement("span", null, t("Karte als PDF exportieren")),
    className: "tm-dialog-container",
    classes: {
      root: classesDialog.dialogRoot,
      paper: classesDialog.dialogContainer
    },
    onClose: onClose,
    body: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: classesBody.mainBody
    }, /*#__PURE__*/React.createElement(FormControlLabel, {
      onChange: evt => setExportFullMap(evt.target.checked),
      control: /*#__PURE__*/React.createElement(Checkbox, {
        checked: exportFullMap
      }),
      label: /*#__PURE__*/React.createElement(Typography, {
        className: classesBody.checkboxLabel
      }, t("Ganze Schweiz exportieren"))
    }), /*#__PURE__*/React.createElement(ExportResolutionSelect, {
      options: options,
      className: classesBody.resSelect
    }), /*#__PURE__*/React.createElement(Typography, {
      paragraph: true
    }, t("Aus Platzgründen sind, je nach Zoomstufe, nicht alle Linien angegeben."))), /*#__PURE__*/React.createElement("div", {
      className: classesBody.footer
    }, /*#__PURE__*/React.createElement(ExportButton, {
      exportFormat: exportPrintOptions === null || exportPrintOptions === void 0 ? void 0 : exportPrintOptions.paperSize,
      exportScale: exportPrintOptions === null || exportPrintOptions === void 0 ? void 0 : exportPrintOptions.quality,
      exportSize: mapSize,
      exportExtent: null // set null to override default extent
      ,
      exportZoom: exportZoom,
      exportCoordinates: exportFullMap ? [SWISS_CENTER, SWISS_CENTER] : exportCoordinates,
      scaleLineConfig: exportFullMap ? null : scaleLineConfig
    })))
  });
}
GaExportMenu.propTypes = {
  onClose: PropTypes.func
};
export default GaExportMenu;
//# sourceMappingURL=GaExportMenu.js.map