"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 _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 _reactDom = _interopRequireDefault(require("react-dom"));

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

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

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

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

var _mathRendering = require("../../math-rendering");

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

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

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 DRAG_TYPE = 'MaskBlank';
exports.DRAG_TYPE = DRAG_TYPE;

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

  var _super = _createSuper(BlankContentComp);

  function BlankContentComp() {
    var _this;

    (0, _classCallCheck2["default"])(this, BlankContentComp);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startDrag", function () {
      var _this$props = _this.props,
          connectDragSource = _this$props.connectDragSource,
          disabled = _this$props.disabled;

      if (!disabled) {
        connectDragSource(_this.dragContainerRef);
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
      e.preventDefault();
      _this.longPressTimer = setTimeout(function () {
        _this.startDrag(e);
      }, 500);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchEnd", function () {
      clearTimeout(_this.longPressTimer);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchMove", function () {
      clearTimeout(_this.longPressTimer);
    });
    return _this;
  }

  (0, _createClass2["default"])(BlankContentComp, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.dragContainerRef) {
        this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, {
          passive: false
        });
        this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);
        this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.dragContainerRef) {
        this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);
        this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);
        this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      (0, _mathRendering.renderMath)(this.rootRef);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          connectDragSource = _this$props2.connectDragSource,
          choice = _this$props2.choice,
          classes = _this$props2.classes,
          disabled = _this$props2.disabled; // 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.

      return connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
        className: (0, _classnames["default"])(classes.choice, disabled && classes.disabled),
        ref: function ref(_ref3) {
          //eslint-disable-next-line
          _this2.dragContainerRef = _reactDom["default"].findDOMNode(_ref3);
        }
      }, /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
        clickable: false,
        disabled: true,
        ref: function ref(_ref2) {
          //eslint-disable-next-line
          _this2.rootRef = _reactDom["default"].findDOMNode(_ref2);
        },
        className: classes.chip,
        label: /*#__PURE__*/_react["default"].createElement("span", {
          className: classes.chipLabel,
          ref: function ref(_ref) {
            if (_ref) {
              _ref.innerHTML = choice.value || ' ';
            }
          }
        }, ' '),
        variant: disabled ? 'outlined' : undefined
      })), {});
    }
  }]);
  return BlankContentComp;
}(_react["default"].Component);

(0, _defineProperty2["default"])(BlankContentComp, "propTypes", {
  disabled: _propTypes["default"].bool,
  choice: _propTypes["default"].object,
  classes: _propTypes["default"].object,
  connectDragSource: _propTypes["default"].func
});
var BlankContent = (0, _styles.withStyles)(function (theme) {
  return {
    choice: {
      border: "solid 0px ".concat(theme.palette.primary.main),
      borderRadius: theme.spacing.unit * 2,
      margin: theme.spacing.unit / 2,
      transform: 'translate(0, 0)'
    },
    chip: {
      backgroundColor: _renderUi.color.white(),
      border: "1px solid ".concat(_renderUi.color.text()),
      color: _renderUi.color.text(),
      alignItems: 'center',
      display: 'inline-flex',
      height: 'initial',
      minHeight: '32px',
      fontSize: 'inherit',
      whiteSpace: 'pre-wrap',
      maxWidth: '374px',
      // 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',
      borderRadius: '3px',
      paddingTop: '12px',
      paddingBottom: '12px'
    },
    chipLabel: {
      whiteSpace: 'normal',
      '& img': {
        display: 'block',
        padding: '2px 0'
      },
      '& mjx-frac': {
        fontSize: '120% !important'
      }
    },
    disabled: {
      opacity: 0.6
    }
  };
})(BlankContentComp);
exports.BlankContent = BlankContent;
var tileSource = {
  canDrag: function canDrag(props) {
    return !props.disabled;
  },
  beginDrag: function beginDrag(props) {
    return {
      choice: props.choice,
      instanceId: props.instanceId
    };
  }
};
var DragDropTile = (0, _drag.DragSource)(DRAG_TYPE, tileSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
})(BlankContent);
var _default = DragDropTile;
exports["default"] = _default;
//# sourceMappingURL=choice.js.map