import { createStyles, IconButton, Link, makeStyles } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import DeleteIcon from '@material-ui/icons/Delete';
import { posToDOMRect, BubbleMenu as TiptapBubbleMenu } from '@tiptap/react';
import React from 'react';
import { useLocalization } from "../hooks/index.js";
const useStyles = makeStyles(theme => {
  return createStyles({
    root: {
      backgroundColor: theme.palette.type === 'dark' ? '#222' : theme.palette.common.white,
      borderRadius: '10px',
      '&:not(:empty)': {
        padding: '3px 6px',
        boxShadow: `0 2px 7px 0 ${theme.palette.type === 'dark' ? 'rgb(255 255 255 / 50%)' : 'rgb(0 0 0 / 50%)'}`
      },
      '&:empty + .tippy-svg-arrow': {
        display: 'none'
      }
    }
  });
});
export const BubbleMenu = props => {
  const classes = useStyles();
  const localization = useLocalization();
  return /*#__PURE__*/React.createElement(TiptapBubbleMenu, {
    className: classes.root,
    tippyOptions: {
      delay: 100,
      trigger: 'click',
      aria: {
        expanded: false
      },
      hideOnClick: false,
      getReferenceClientRect: null,
      onShow: instance => {
        const {
          state
        } = props.editor.view;
        const {
          selection
        } = state;
        const {
          ranges
        } = selection;
        const from = Math.min(...ranges.map(range => range.$from.pos));
        const to = Math.max(...ranges.map(range => range.$to.pos));
        instance.setProps({
          getReferenceClientRect: () => posToDOMRect(props.editor.view, from, to)
        });
      }
    },
    editor: props.editor
  }, props.editor.isActive('image') && /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": localization.bubbleMenu.removeImage,
    size: "small",
    onClick: () => props.editor.chain().focus().deleteSelection().run()
  }, /*#__PURE__*/React.createElement(DeleteIcon, {
    fontSize: "inherit"
  })), props.editor.isActive('link') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link, {
    color: "inherit",
    href: props.editor.getAttributes('link').href,
    target: "_blank",
    rel: "noreferrer",
    style: {
      marginRight: '3px'
    }
  }, props.editor.getAttributes('link').href), /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": localization.bubbleMenu.removeLink,
    size: "small",
    onClick: () => props.editor.chain().focus().unsetLink().run()
  }, /*#__PURE__*/React.createElement(CloseIcon, {
    fontSize: "inherit"
  }))));
};
//# sourceMappingURL=bubble-menu.js.map