import React from "react";
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useSelector } from "react-redux";
import useTranslation from "../../utils/useTranslation";
import { ReactComponent as Loader } from "../../img/loader.svg";
import PermalinkInput from "../PermalinkInput";
const useStyles = makeStyles(() => ({
  root: {
    position: "relative"
  },
  loader: {
    position: "absolute",
    top: 0,
    height: "100%",
    display: "flex",
    alignItems: "center"
  }
}));
function DrawEditLinkInput() {
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  const isLoading = useSelector(state => state.app.isDrawEditLinkLoading);
  const shortenUrl = useSelector(state => state.app.drawEditLink);
  if (!shortenUrl) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(PermalinkInput, {
    value: shortenUrl
  }), isLoading && /*#__PURE__*/React.createElement(Typography, {
    variant: "subtitle1"
  }, /*#__PURE__*/React.createElement("span", {
    className: classes.loader
  }, /*#__PURE__*/React.createElement(Loader, null), " ", /*#__PURE__*/React.createElement("span", null, t("Laden...")))));
}
export default /*#__PURE__*/React.memo(DrawEditLinkInput);
//# sourceMappingURL=DrawEditLinkInput.js.map