"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mathRendering = require("@pie-lib/math-rendering");

var _debug = _interopRequireDefault(require("debug"));

var _drag = require("../../drag");

var _styles = require("@material-ui/core/styles");

var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));

var _classnames3 = _interopRequireDefault(require("classnames"));

var _renderUi = require("../../render-ui");

var _excluded = ["connectDragSource", "connectDropTarget"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var log = (0, _debug["default"])('pie-lib:mask-markup:blank');
var DRAG_TYPE = 'MaskBlank';
exports.DRAG_TYPE = DRAG_TYPE;
var useStyles = (0, _styles.withStyles)(function () {
  return {
    content: {
      border: "solid 0px ".concat(_renderUi.color.primary()),
      minWidth: '200px',
      touchAction: 'none',
      overflow: 'hidden'
    },
    chip: {
      backgroundColor: _renderUi.color.background(),
      border: "1px solid ".concat(_renderUi.color.text()),
      color: _renderUi.color.text(),
      minWidth: '90px',
      fontSize: 'inherit',
      minHeight: '32px',
      height: 'auto',
      maxWidth: '374px',
      position: 'relative'
    },
    chipLabel: {
      whiteSpace: 'pre-wrap',
      // Added for touch devices, for image content.
      // This will prevent the context menu from appearing and not allowing other interactions with the image.
      // If interactions with the image in the token will be requested we should handle only the context Menu.
      pointerEvents: 'none',
      '& img': {
        display: 'block',
        padding: '2px 0'
      }
    },
    hidden: {
      color: 'transparent',
      opacity: 0
    },
    dragged: {
      position: 'absolute',
      left: 16,
      maxWidth: '60px'
    },
    correct: {
      border: "solid 1px ".concat(_renderUi.color.correct())
    },
    incorrect: {
      border: "solid 1px ".concat(_renderUi.color.incorrect())
    },
    over: {
      whiteSpace: 'nowrap',
      overflow: 'hidden'
    }
  };
});

var BlankContent = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(BlankContent, _React$Component);

  var _super = _createSuper(BlankContent);

  function BlankContent() {
    var _this;

    (0, _classCallCheck2["default"])(this, BlankContent);
    _this = _super.call(this);
    _this.state = {
      height: 0
    };
    return _this;
  }

  (0, _createClass2["default"])(BlankContent, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this2 = this;

      (0, _mathRendering.renderMath)(this.rootRef);
      var currentChoice = this.props.choice;
      var prevChoice = prevProps.choice;

      if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
        if (!currentChoice) {
          this.setState({
            height: 0
          });
          return;
        }

        setTimeout(function () {
          _this2.setState({
            height: _this2.spanRef.offsetHeight
          });
        }, 300);
      }
    }
  }, {
    key: "addDraggableFalseAttributes",
    value: function addDraggableFalseAttributes(parent) {
      parent.childNodes.forEach(function (elem) {
        if (elem instanceof Element || elem instanceof HTMLDocument) {
          elem.setAttribute('draggable', false);
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this,
          _classnames2;

      var _this$props = this.props,
          disabled = _this$props.disabled,
          choice = _this$props.choice,
          classes = _this$props.classes,
          isOver = _this$props.isOver,
          dragItem = _this$props.dragItem,
          correct = _this$props.correct;
      var draggedLabel = dragItem && isOver && dragItem.choice.value;
      var label = choice && choice.value;
      return (
        /*#__PURE__*/
        // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
        _react["default"].createElement(_Chip["default"], {
          clickable: false,
          disabled: true,
          ref: function ref(_ref3) {
            //eslint-disable-next-line
            _this3.rootRef = _reactDom["default"].findDOMNode(_ref3);
          },
          component: "span",
          label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
            className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, (0, _defineProperty2["default"])({}, classes.hidden, draggedLabel)),
            ref: function ref(_ref) {
              if (_ref) {
                //eslint-disable-next-line
                _this3.spanRef = _reactDom["default"].findDOMNode(_ref);
                _ref.innerHTML = label || '';

                _this3.addDraggableFalseAttributes(_ref);
              }
            }
          }, ' '), draggedLabel && /*#__PURE__*/_react["default"].createElement("span", {
            className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, classes.dragged),
            ref: function ref(_ref2) {
              if (_ref2) {
                //eslint-disable-next-line
                _this3.spanRef = _reactDom["default"].findDOMNode(_ref2);
                _ref2.innerHTML = draggedLabel || '';

                _this3.addDraggableFalseAttributes(_ref2);
              }
            }
          }, ' ')),
          className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.correct, correct !== undefined && correct), (0, _defineProperty2["default"])(_classnames2, classes.incorrect, correct !== undefined && !correct), _classnames2)),
          variant: disabled ? 'outlined' : undefined,
          style: _objectSpread({}, this.state.height ? {
            height: this.state.height
          } : {}),
          classes: {
            label: isOver && classes.over
          }
        })
      );
    }
  }]);
  return BlankContent;
}(_react["default"].Component);

exports.BlankContent = BlankContent;
(0, _defineProperty2["default"])(BlankContent, "propTypes", {
  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  disabled: _propTypes["default"].bool,
  duplicates: _propTypes["default"].bool,
  choice: _propTypes["default"].object,
  classes: _propTypes["default"].object,
  isOver: _propTypes["default"].bool,
  dragItem: _propTypes["default"].object,
  correct: _propTypes["default"].bool,
  onChange: _propTypes["default"].func
});
var StyledBlankContent = useStyles(BlankContent);
var connectedBlankContent = useStyles(function (_ref4) {
  var connectDragSource = _ref4.connectDragSource,
      connectDropTarget = _ref4.connectDropTarget,
      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
  var classes = props.classes,
      isOver = props.isOver;
  return connectDropTarget(connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
    className: (0, _classnames3["default"])(classes.content, isOver && classes.over)
  }, /*#__PURE__*/_react["default"].createElement(StyledBlankContent, props))));
});
var tileTarget = {
  drop: function drop(props, monitor) {
    var draggedItem = monitor.getItem();
    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);

    if (draggedItem.id !== props.id) {
      props.onChange(props.id, draggedItem.choice.id);
    }

    return {
      dropped: draggedItem.id !== props.id
    };
  },
  canDrop: function canDrop(props, monitor) {
    var draggedItem = monitor.getItem();
    return draggedItem.instanceId === props.instanceId;
  }
};
var DropTile = (0, _drag.DropTarget)(DRAG_TYPE, tileTarget, function (connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    dragItem: monitor.getItem()
  };
})(connectedBlankContent);
var tileSource = {
  canDrag: function canDrag(props) {
    return !props.disabled && !!props.choice;
  },
  beginDrag: function beginDrag(props) {
    return {
      id: props.id,
      choice: props.choice,
      instanceId: props.instanceId,
      fromChoice: true
    };
  },
  endDrag: function endDrag(props, monitor) {
    // this will be null if it did not drop
    var dropResult = monitor.getDropResult();

    if (!dropResult || dropResult.dropped && !props.duplicates) {
      var draggedItem = monitor.getItem();

      if (draggedItem.fromChoice) {
        props.onChange(props.id, undefined);
      }
    }
  }
};
var DragDropTile = (0, _drag.DragSource)(DRAG_TYPE, tileSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
})(DropTile);
var _default = DragDropTile;
exports["default"] = _default;
//# sourceMappingURL=blank.js.map