function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { FaTrash, FaInfoCircle } from "react-icons/fa";
import { Grid, Typography, IconButton } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useMatomo } from "@jonkoops/matomo-tracker-react";
import useTranslation from "../../utils/useTranslation";
import { setDialogVisible } from "../../model/app/actions";
import DrawButton from "../DrawButton";
import { NAME } from "../DrawRemoveDialog";
import DrawPermalinkButton from "../DrawPermalinkButton";
import { ReactComponent as PencilAdd } from "../../img/pencil_add.svg";
import { TRACK_NEW_DRAW_ACTION } from "../../utils/constants";
import { trackEvent } from "../../utils/trackingUtils";
const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(2)
  },
  buttons: {
    display: "flex",
    paddingLeft: 12,
    gap: 24,
    "& .MuiButtonBase-root": {
      height: 20,
      padding: 0
    }
  },
  caption: {
    display: "flex",
    alignItems: "start",
    gap: theme.spacing(1),
    marginTop: theme.spacing(2)
  },
  infoIcon: {
    flexShrink: 0,
    paddingTop: 3
  }
}));
const getTrackEventOptions = (activeTopic, t, opts) => _objectSpread({
  eventType: "action",
  componentName: "edit button",
  label: t("Neue Zeichnung"),
  location: t(activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.name, {
    lng: "de"
  }),
  variant: "Neue Zeichnung"
}, opts);
function Draw() {
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  const dispatch = useDispatch();
  const {
    trackEvent: trackMatomoEvent
  } = useMatomo();
  const drawIds = useSelector(state => state.app.drawIds);
  const activeTopic = useSelector(state => state.app.activeTopic);
  const onRemoveClick = useCallback(() => {
    dispatch(setDialogVisible(NAME));
  }, [dispatch]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12,
    className: classes.buttons
  }, /*#__PURE__*/React.createElement(DrawButton, {
    disabled: !!drawIds,
    onClick: () => {
      trackMatomoEvent({
        category: activeTopic === null || activeTopic === void 0 ? void 0 : activeTopic.key,
        action: TRACK_NEW_DRAW_ACTION
      });
      trackEvent(getTrackEventOptions(activeTopic, t));
    }
  }, /*#__PURE__*/React.createElement(PencilAdd, {
    focusable: false
  })), /*#__PURE__*/React.createElement(DrawButton, {
    disabled: !drawIds,
    title: t("Zeichnung bearbeiten"),
    onClick: () => {
      trackEvent(getTrackEventOptions(activeTopic, t, {
        label: t("Zeichnung bearbeiten"),
        variant: "Zeichnung bearbeiten"
      }), activeTopic);
    }
  }), /*#__PURE__*/React.createElement(IconButton, {
    title: t("Zeichnung löschen"),
    onClick: onRemoveClick,
    disabled: !drawIds
  }, /*#__PURE__*/React.createElement(FaTrash, null)), /*#__PURE__*/React.createElement(DrawPermalinkButton, {
    buttonProps: {
      title: t("Zeichnung teilen"),
      disabled: !drawIds
    }
  })), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "subtitle1",
    className: classes.caption
  }, /*#__PURE__*/React.createElement(FaInfoCircle, {
    focusable: false,
    fontSize: "small",
    className: classes.infoIcon
  }), /*#__PURE__*/React.createElement("span", null, t("Ihre Zeichnung wird ein Jahr lang gespeichert. Bitte speichernSie vor dem verlassen der Seite den Link zum Bearbeiten der Zeichnung."))))));
}
export default /*#__PURE__*/React.memo(Draw);
//# sourceMappingURL=Draw.js.map