import * as React from "react";
import { ButtonFloating, IconButton } from "@webiny/ui/Button";
import { Elevation } from "@webiny/ui/Elevation";
import { ReactComponent as AddIcon } from "@svgr/webpack!../../assets/icons/add.svg";
import { Tooltip } from "@webiny/ui/Tooltip";
import { Typography } from "@webiny/ui/Typography";
import { CircularProgress } from "@webiny/ui/Progress";
import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
import { ReactComponent as EditIcon } from "@svgr/webpack!./icons/round-edit-24px.svg";
import { ReactComponent as DeleteIcon } from "@svgr/webpack!./icons/round-close-24px.svg";
import * as Styled from "./StyledComponents";
import kebabCase from "lodash/kebabCase";

var BlockPreview = function BlockPreview(props) {
  var plugin = props.plugin,
      addBlockToContent = props.addBlockToContent,
      deactivatePlugin = props.deactivatePlugin,
      onEdit = props.onEdit,
      onDelete = props.onDelete;
  return /*#__PURE__*/React.createElement(Elevation, {
    z: 1,
    key: plugin.name,
    className: Styled.blockStyle,
    "data-testid": "pb-editor-page-blocks-list-item-".concat(kebabCase(plugin.title))
  }, /*#__PURE__*/React.createElement(Styled.Overlay, null, /*#__PURE__*/React.createElement(Styled.Backdrop, {
    className: "backdrop"
  }), /*#__PURE__*/React.createElement(Styled.AddBlock, {
    className: "add-block"
  }, /*#__PURE__*/React.createElement(ButtonFloating, {
    label: "Click to Add",
    onClick: function onClick(e) {
      addBlockToContent(plugin);
      !e.shiftKey && deactivatePlugin({
        name: "pb-editor-search-blocks-bar"
      });
    },
    icon: /*#__PURE__*/React.createElement(AddIcon, null)
  })), onDelete && /*#__PURE__*/React.createElement(Styled.DeleteBlock, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
    title: "Delete block",
    message: "Are you sure you want to delete this block?",
    loading: /*#__PURE__*/React.createElement(CircularProgress, {
      label: "Deleting block..."
    })
  }, function (_ref) {
    var showConfirmation = _ref.showConfirmation;
    return /*#__PURE__*/React.createElement(React.Fragment, null, plugin.id ? /*#__PURE__*/React.createElement(IconButton, {
      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
      onClick: function onClick() {
        return showConfirmation(onDelete);
      }
    }) : /*#__PURE__*/React.createElement(Tooltip, {
      content: "Cannot delete.",
      placement: "top"
    }, /*#__PURE__*/React.createElement(IconButton, {
      disabled: true,
      icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
    })));
  })), onEdit && /*#__PURE__*/React.createElement(Styled.EditBlock, null, plugin.id ? /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(EditIcon, null),
    onClick: onEdit
  }) : /*#__PURE__*/React.createElement(Tooltip, {
    content: "Cannot edit.",
    placement: "top"
  }, /*#__PURE__*/React.createElement(IconButton, {
    disabled: true,
    icon: /*#__PURE__*/React.createElement(EditIcon, null)
  })))), /*#__PURE__*/React.createElement(Styled.BlockPreview, null, plugin.preview()), /*#__PURE__*/React.createElement(Styled.Title, null, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, plugin.title)));
};

BlockPreview.displayName = "BlockPreview";
export default BlockPreview;
//# sourceMappingURL=BlockPreview.js.map