function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/* eslint-disable */
import React, { useRef, useState } from 'react';
import { DragPreviewImage, useDrag } from 'react-dnd';
import { boxImage } from '../assets/IconBase64';
import DropZone from './DropZone';
/**
 * @class DesignerBox 设计态的 MagicBox。
 *
 * MagicBox 分成2个内部组件分别实现设计器和渲染器功能：DesignerBox 和 RendererBox。
 * 在 designer 模式和 renderer 模式下具有不同的外观和功能。
 * - 在 designer 模式下，具有拖拽布局功能。
 * - 在 renderer 模式下纯展现，其功能退化成一层空的容器 div，不再具有设计器功能。
 *
 * @author zhang.xiaofei38@iwhalecloud.com
 */

var DesignerBox = function DesignerBox(_ref) {
  var id = _ref.id,
      pid = _ref.pid,
      index = _ref.index,
      nodeData = _ref.nodeData,
      children = _ref.children,
      onHover = _ref.onHover,
      onDrop = _ref.onDrop,
      componentMap = _ref.componentMap,
      onComponentClick = _ref.onComponentClick,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? {} : _ref$style,
      className = _ref.className,
      _ref$acceptTypes = _ref.acceptTypes,
      acceptTypes = _ref$acceptTypes === void 0 ? ['MagicBox', 'MRow'] : _ref$acceptTypes,
      _ref$isValidDest = _ref.isValidDest,
      isValidDest = _ref$isValidDest === void 0 ? false : _ref$isValidDest,
      _ref$canDrag = _ref.canDrag,
      canDrag = _ref$canDrag === void 0 ? true : _ref$canDrag,
      _ref$isLeaf = _ref.isLeaf,
      isLeaf = _ref$isLeaf === void 0 ? false : _ref$isLeaf,
      _ref$isSelected = _ref.isSelected,
      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
      _ref$innerDirection = _ref.innerDirection,
      innerDirection = _ref$innerDirection === void 0 ? 'vertical' : _ref$innerDirection,
      _ref$mode = _ref.mode,
      mode = _ref$mode === void 0 ? 'designer' : _ref$mode,
      terminalType = _ref.terminalType,
      spacing = _ref.spacing;

  var _useState = useState(!canDrag),
      _useState2 = _slicedToArray(_useState, 2),
      forbidDrag = _useState2[0],
      setForbidDrag = _useState2[1];

  var _useDrag = useDrag({
    item: {
      type: nodeData.type || 'MagicBox',
      id: id,
      index: index,
      pid: pid
    },
    canDrag: !forbidDrag,
    collect: function collect(monitor) {
      return {
        isDragging: monitor.isDragging()
      };
    }
  }),
      _useDrag2 = _slicedToArray(_useDrag, 3),
      isDragging = _useDrag2[0].isDragging,
      drag = _useDrag2[1],
      preview = _useDrag2[2];
  /**
   * 一组内部 CSS 样式，这些样式会根据不同的状态发生变化。
   * 外部传入的 style 属性会被合并到内部定义的 CSS 样式对象中。
   * 外部使用者可以定义同名的 CSS 属性来覆盖这些内部的默认样式。
   * 所有 CSS 属性的写法遵守 React 定义的命名规则，即小驼峰法则。
   */


  var composeDesignerStyle = function composeDesignerStyle() {
    var innerStyle = _objectSpread({
      minHeight: '10px',
      padding: '0',
      margin: '0',
      backgroundColor: isDragging ? 'rgba(234, 221, 153, 0.1)' : 'transparent',
      cursor: forbidDrag ? 'auto' : 'move',
      filter: isDragging ? 'blur(2px)' : 'unset',
      outline: isSelected ? '2px dashed rgba(237,33,33,0.8)' : 'none',
      outlineOffset: isSelected ? '-1px' : ''
    }, style);

    return innerStyle;
  };

  return /*#__PURE__*/React.createElement("div", {
    ref: drag(useRef(null)),
    style: composeDesignerStyle(),
    onClick: onComponentClick || emptyFn,
    className: className || ''
  }, canDrag && /*#__PURE__*/React.createElement(DragPreviewImage, {
    style: {
      width: '12px'
    },
    connect: preview,
    src: boxImage
  }), isLeaf ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(DropZone, {
    acceptTypes: acceptTypes,
    id: Math.random(),
    pid: id,
    index: 0,
    onHover: onHover,
    onDrop: onDrop,
    isValidDest: isValidDest,
    direction: innerDirection
  }), children, nodeData && nodeData.childNodes && nodeData.childNodes.map(function (nodeData, index) {
    var Clazz = componentMap[nodeData.type];

    if (!Clazz) {
      console.error("[MagicBox] Can not find type ".concat(nodeData.type));
      return;
    }

    nodeData.index = index;

    var newInstanceProps = _objectSpread({}, nodeData, {
      nodeData: nodeData,
      onHover: onHover,
      onDrop: onDrop,
      componentMap: componentMap,
      isValidDest: isValidDest,
      mode: mode,
      terminalType: terminalType,
      canDrag: true
    });

    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: nodeData.id
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        paddingBottom: spacing
      }
    }, React.createElement(Clazz, _objectSpread({}, newInstanceProps), null), /*#__PURE__*/React.createElement(DropZone, {
      acceptTypes: acceptTypes,
      id: Math.random(),
      pid: id,
      index: index + 1,
      onHover: onHover,
      onDrop: onDrop,
      isValidDest: isValidDest,
      direction: innerDirection
    })));
  }));
};

export default DesignerBox;