import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState, useCallback } from "react";
import { useDragLayer } from "react-dnd";
import { connect } from "../../redux";
import { getPlugins } from "../../../plugins";
import { css } from 'emotion';
import { usePageBuilder } from "../../../hooks/usePageBuilder";
var layerStyles = {
  position: "fixed",
  pointerEvents: "none",
  zIndex: 100,
  left: 0,
  top: 0,
  width: "100%",
  height: "100%",
  // background: 'red',
  cursor: 'pointer !important'
};
var subscribedToOffsetChange = false;
var dragPreviewRef = null;

var onOffsetChange = function onOffsetChange(monitor) {
  return function () {
    if (!dragPreviewRef) {
      return;
    }

    var offset = monitor.getClientOffset();

    if (!offset) {
      return;
    }

    var transform = "translate(".concat(offset.x - 15, "px, ").concat(offset.y - 15, "px)");
    dragPreviewRef.style["transform"] = transform;
    dragPreviewRef.style["-webkit-transform"] = transform;
  };
};

var menuIcon = /*#__PURE__*/css({
  zIndex: 50,
  fontSize: 12,
  svg: {
    width: '14px !important',
    height: '14px !important'
  }
}, "label:menuIcon;");
var menuItem = /*#__PURE__*/css({
  width: 95,
  height: 28,
  margin: '0 3px',
  background: '#e4eefd',
  borderRadius: 3,
  padding: '0 1px',
  border: '2px dashed #8cbdf9',
  div: {
    display: 'flex',
    alignItems: 'center'
  },
  'div:last-child': {
    marginLeft: 4,
    fontSize: 12,
    color: '#555555'
  }
}, "label:menuItem;");
var formGroupInput = 'pb-editor-element-group-form-input';
var formGroupSelect = 'pb-editor-element-group-form-select';
var formGroupComplex = 'pb-editor-element-group-form-complex';
var formGroupCustom = 'pb-editor-element-group-form-custom';

var DragPreview = function DragPreview(_ref) {
  var dragComponent = _ref.dragComponent;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      dragHelperOpacity = _useState2[0],
      setDragHelperOpacity = _useState2[1];

  var _useDragLayer = useDragLayer(function (monitor) {
    if (!subscribedToOffsetChange) {
      // @ts-ignore
      monitor.subscribeToOffsetChange(onOffsetChange(monitor));
      subscribedToOffsetChange = true;
    }

    return {
      isDragging: monitor.isDragging()
    };
  }),
      isDragging = _useDragLayer.isDragging;

  var _usePageBuilder = usePageBuilder(),
      theme = _usePageBuilder.theme;

  var getGroups = useCallback(function () {
    return getPlugins('pb-editor-page-element-group');
  }, []);

  var _useState3 = useState(getGroups()[0].name),
      _useState4 = _slicedToArray(_useState3, 2),
      group = _useState4[0],
      setGroup = _useState4[1];

  var getGroupElements = useCallback(function (group) {
    return getPlugins('pb-editor-page-element').filter(function (el) {
      return el.toolbar && el.toolbar.group === group;
    });
  }, []);
  useEffect(function () {
    return function () {
      subscribedToOffsetChange = false;
      dragPreviewRef = null;
    };
  }, []); // We track the value of "isDragging" and apply opacity=1 (after 100ms), when it switches to true.
  // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it
  // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.

  useEffect(function () {
    if (isDragging) {
      setTimeout(function () {
        setDragHelperOpacity(isDragging ? 1 : 0);
      }, 0);
    } else {
      setDragHelperOpacity(0);
    }
  }, [isDragging]);

  if (!isDragging) {
    return null;
  }

  return /*#__PURE__*/React.createElement("div", {
    style: layerStyles
  }, /*#__PURE__*/React.createElement("div", {
    ref: function ref(el) {
      return dragPreviewRef = el;
    },
    style: {
      display: "block",
      opacity: dragHelperOpacity,
      transition: "opacity .1s",
      transitionDelay: '0.25s',
      position: 'absolute'
    }
  }, getGroups().map(function (plugin) {
    if (plugin.name === formGroupInput || plugin.name === formGroupSelect || plugin.name === formGroupComplex || plugin.name === formGroupCustom) {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          width: 95,
          height: 28,
          position: 'absolute',
          left: 0,
          top: 0
        }
      }, group && getGroupElements(plugin.name).map(function (plugin) {
        if (dragComponent === plugin.elementType) {
          return /*#__PURE__*/React.createElement("div", {
            className: "flex flex-row text-sm itemsCenter ".concat(menuItem)
          }, /*#__PURE__*/React.createElement("div", {
            className: menuIcon
          }, plugin.toolbar.preview({
            theme: theme
          })), /*#__PURE__*/React.createElement("div", null, plugin.toolbar.title));
        }
      }));
    }
  })));
};

export default connect(function (state) {
  var _state$ui$dragCompone = state.ui.dragComponent,
      dragComponent = _state$ui$dragCompone === void 0 ? '' : _state$ui$dragCompone;
  return {
    dragComponent: dragComponent || ''
  };
})(DragPreview);
//# sourceMappingURL=DragPreview.js.map