import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { makeStyles } from "@mui/styles";
import { Button } from "@mui/material";
import useTranslation from "../../utils/useTranslation";
import PermalinkInput from "../PermalinkInput";
import Dialog from "../Dialog";
import { setDialogVisible, setDrawIds } from "../../model/app/actions";
export const NAME = "drawRemoveDialog";
const useStyles = makeStyles(theme => ({
  dialogContainer: {
    minWidth: "400px !important"
  },
  link: {
    marginTop: theme.spacing(2)
  },
  footer: {
    marginTop: theme.spacing(2),
    paddingTop: theme.spacing(2),
    display: "flex",
    justifyContent: "flex-end",
    width: "100%",
    "& > button": {
      marginLeft: theme.spacing(2)
    }
  }
}));
function DrawRemoveDialog() {
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  const dispatch = useDispatch();
  const drawLayer = useSelector(state => state.map.drawLayer);
  const clear = useCallback(() => {
    drawLayer.olLayer.getSource().clear(true);
    dispatch(setDrawIds());
    dispatch(setDialogVisible());
  }, [drawLayer, dispatch]);
  const closeDialog = useCallback(() => {
    dispatch(setDialogVisible());
  }, [dispatch]);
  return /*#__PURE__*/React.createElement(Dialog, {
    isModal: true,
    name: NAME,
    title: /*#__PURE__*/React.createElement("span", null, t("Zeichnung löschen")),
    className: "tm-dialog-container ".concat(classes.dialogContainer),
    body: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, t("Wollen Sie den Plan wirklich aus der Karte löschen?"), /*#__PURE__*/React.createElement("br", null), t("Um den Plan später zu bearbeiten, speichern Sie bitte folgenden Link"), ":"), /*#__PURE__*/React.createElement("div", {
      className: classes.link
    }, /*#__PURE__*/React.createElement(PermalinkInput, {
      value: window.location.href
    })), /*#__PURE__*/React.createElement("div", {
      className: classes.footer
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: clear
    }, t("Löschen")), /*#__PURE__*/React.createElement(Button, {
      onClick: closeDialog,
      color: "secondary"
    }, t("Abbrechen"))))
  });
}
export default /*#__PURE__*/React.memo(DrawRemoveDialog);
//# sourceMappingURL=DrawRemoveDialog.js.map