"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.tileTarget = exports.tileSource = exports["default"] = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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 _propTypes = _interopRequireDefault(require("prop-types"));

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _drag = require("@pie-lib/drag");

var _renderUi = require("@pie-lib/render-ui");

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

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

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

var _icons = require("../icons");

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

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 useStyles = (0, _styles.withStyles)(function (theme) {
  return {
    content: {
      border: "solid 0px ".concat(theme.palette.primary.main),
      '& mjx-frac': {
        fontSize: '120% !important'
      }
    },
    chip: {
      minWidth: '90px'
    },
    correct: {
      border: "solid 1px ".concat(_renderUi.color.correct())
    },
    incorrect: {
      border: "solid 1px ".concat(theme.palette.error.main)
    },
    selected: {
      border: "2px solid ".concat(_renderUi.color.primaryDark(), " !important")
    }
  };
});

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

  var _super = _createSuper(BlankContent);

  function BlankContent(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, BlankContent);
    _this = _super.call(this, props);
    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.state = {
      hoveredElementSize: null
    };
    return _this;
  }

  (0, _createClass2["default"])(BlankContent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      document.addEventListener('click', this.handleClick);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('click', this.handleClick);
    }
  }, {
    key: "handleClick",
    value: function handleClick(event) {
      var classes = this.props.classes;

      if (this.elementRef) {
        this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
      }
    }
  }, {
    key: "getSnapshotBeforeUpdate",
    value: function getSnapshotBeforeUpdate(prevProps) {
      if (!prevProps.isOver && this.props.isOver && this.elementRef) {
        var node = this.elementRef;
        return {
          width: node.offsetWidth,
          height: node.offsetHeight
        };
      }

      return null;
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState, snapshot) {
      if (this.elementRef && typeof _mathRendering.renderMath === 'function') {
        (0, _mathRendering.renderMath)(this.elementRef);
      }

      if (snapshot && (!this.state.hoveredElementSize || this.state.hoveredElementSize.width !== snapshot.width || this.state.hoveredElementSize.height !== snapshot.height)) {
        this.setState({
          hoveredElementSize: snapshot
        });
        return;
      }

      if (prevProps.isOver && !this.props.isOver && this.state.hoveredElementSize) {
        this.setState({
          hoveredElementSize: null
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          n = _this$props.n,
          children = _this$props.children,
          isDragging = _this$props.isDragging,
          dragItem = _this$props.dragItem,
          isOver = _this$props.isOver,
          value = _this$props.value;
      var hoveredElementSize = this.state.hoveredElementSize;
      var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
      var finalLabel = isDragging ? "\xA0" : label;
      var hasGrip = finalLabel !== "\xA0";
      var isPreview = dragItem && isOver;
      return /*#__PURE__*/_react["default"].createElement("div", {
        ref: function ref(_ref) {
          return _this2.elementRef = _ref;
        },
        style: {
          display: 'inline-flex',
          minWidth: '178px',
          minHeight: '36px',
          background: isPreview ? "".concat(_renderUi.color.defaults.BORDER_LIGHT) : "".concat(_renderUi.color.defaults.WHITE),
          border: isPreview ? "1px solid  ".concat(_renderUi.color.defaults.BORDER_DARK) : "1px solid  ".concat(_renderUi.color.defaults.BORDER_LIGHT),
          boxSizing: 'border-box',
          borderRadius: '3px',
          overflow: 'hidden',
          position: 'relative',
          padding: '8px 8px 8px 35px',
          width: hoveredElementSize ? hoveredElementSize.width : undefined,
          height: hoveredElementSize ? hoveredElementSize.height : undefined
        },
        "data-key": n.key,
        contentEditable: false
      }, hasGrip && /*#__PURE__*/_react["default"].createElement(_icons.GripIcon, {
        style: {
          position: 'absolute',
          top: '6px',
          left: '15px',
          color: '#9B9B9B'
        },
        contentEditable: false
      }), /*#__PURE__*/_react["default"].createElement("span", {
        dangerouslySetInnerHTML: {
          __html: finalLabel
        }
      }), children);
    }
  }]);
  return BlankContent;
}(_react["default"].Component);

exports.BlankContent = BlankContent;
(0, _defineProperty2["default"])(BlankContent, "propTypes", {
  n: _propTypes["default"].object,
  children: _propTypes["default"].func,
  isDragging: _propTypes["default"].bool,
  isOver: _propTypes["default"].bool,
  dragItem: _propTypes["default"].object,
  value: _propTypes["default"].object,
  classes: _propTypes["default"].object
});
var StyledBlankContent = useStyles(BlankContent);
var connectedBlankContent = useStyles(function (_ref2) {
  var connectDropTarget = _ref2.connectDropTarget,
      connectDragSource = _ref2.connectDragSource,
      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var classes = props.classes,
      isOver = props.isOver,
      value = props.value;

  var dragContent = /*#__PURE__*/_react["default"].createElement(StyledBlankContent, props);

  var dragEl = !value ? dragContent : connectDragSource( /*#__PURE__*/_react["default"].createElement("span", null, dragContent));

  var content = /*#__PURE__*/_react["default"].createElement("span", {
    className: (0, _classnames["default"])(classes.content, isOver && classes.over)
  }, dragEl);

  return connectDropTarget ? connectDropTarget(content) : content;
});
var tileTarget = {
  drop: function drop(props, monitor) {
    var draggedItem = monitor.getItem();
    var shouldDrop = (0, _isUndefined["default"])(draggedItem.value.index) || (0, _isUndefined["default"])(props.value.index) || draggedItem.value.index !== props.value.index;

    if (shouldDrop) {
      props.onChange(draggedItem.value);
    }

    return {
      dropped: shouldDrop
    };
  },
  canDrop: function canDrop(props, monitor) {
    var draggedItem = monitor.getItem();
    return draggedItem.instanceId === props.instanceId;
  }
};
exports.tileTarget = tileTarget;
var DropTile = (0, _drag.DropTarget)('drag-in-the-blank-choice', tileTarget, function (connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver({
      shallow: true
    }),
    dragItem: monitor.getItem()
  };
})(connectedBlankContent);
var tileSource = {
  canDrag: function canDrag(props) {
    return !props.disabled && !!props.value;
  },
  beginDrag: function beginDrag(props) {
    return {
      id: props.targetId,
      value: props.value,
      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.removeResponse(draggedItem.value);
      }
    }
  }
};
exports.tileSource = tileSource;

var _default = (0, _drag.DragSource)('drag-in-the-blank-choice', tileSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
})(DropTile);

exports["default"] = _default;
//# sourceMappingURL=choice.js.map