"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = 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 _propTypes = _interopRequireDefault(require("prop-types"));

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

var _choices = _interopRequireDefault(require("./choices"));

var _blank = _interopRequireDefault(require("./components/blank"));

var _withMask = require("./with-mask");

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; } }

// eslint-disable-next-line react/display-name
var Masked = (0, _withMask.withMask)('blank', function (props) {
  return function (node, data, onChange) {
    var dataset = node.data ? node.data.dataset || {} : {};

    if (dataset.component === 'blank') {
      // eslint-disable-next-line react/prop-types
      var disabled = props.disabled,
          duplicates = props.duplicates,
          correctResponse = props.correctResponse,
          feedback = props.feedback,
          showCorrectAnswer = props.showCorrectAnswer,
          emptyResponseAreaWidth = props.emptyResponseAreaWidth,
          emptyResponseAreaHeight = props.emptyResponseAreaHeight;
      var choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id]; // eslint-disable-next-line react/prop-types

      var choice = choiceId && props.choices.find(function (c) {
        return c.id === choiceId;
      });
      return /*#__PURE__*/_react["default"].createElement(_blank["default"], {
        key: "".concat(node.type, "-").concat(dataset.id),
        correct: showCorrectAnswer || feedback && feedback[dataset.id],
        disabled: disabled,
        duplicates: duplicates,
        choice: choice,
        id: dataset.id,
        emptyResponseAreaWidth: emptyResponseAreaWidth,
        emptyResponseAreaHeight: emptyResponseAreaHeight,
        onChange: onChange
      });
    }
  };
});

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

  var _super = _createSuper(DragInTheBlank);

  function DragInTheBlank() {
    var _this;

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

    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), "getPositionDirection", function (choicePosition) {
      var flexDirection;
      var justifyContent;
      var alignItems;

      switch (choicePosition) {
        case 'left':
          flexDirection = 'row';
          alignItems = 'center';
          break;

        case 'right':
          flexDirection = 'row-reverse';
          justifyContent = 'flex-end';
          alignItems = 'center';
          break;

        case 'below':
          flexDirection = 'column-reverse';
          break;

        default:
          // above
          flexDirection = 'column';
          break;
      }

      return {
        flexDirection: flexDirection,
        justifyContent: justifyContent,
        alignItems: alignItems
      };
    });
    return _this;
  }

  (0, _createClass2["default"])(DragInTheBlank, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps() {
      if (this.rootRef) {
        (0, _mathRendering.renderMath)(this.rootRef);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      (0, _mathRendering.renderMath)(this.rootRef);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          markup = _this$props.markup,
          duplicates = _this$props.duplicates,
          layout = _this$props.layout,
          value = _this$props.value,
          onChange = _this$props.onChange,
          choicesPosition = _this$props.choicesPosition,
          choices = _this$props.choices,
          correctResponse = _this$props.correctResponse,
          disabled = _this$props.disabled,
          feedback = _this$props.feedback,
          showCorrectAnswer = _this$props.showCorrectAnswer,
          emptyResponseAreaWidth = _this$props.emptyResponseAreaWidth,
          emptyResponseAreaHeight = _this$props.emptyResponseAreaHeight;
      var choicePosition = choicesPosition || 'below';

      var style = _objectSpread({
        display: 'flex',
        minWidth: '100px'
      }, this.getPositionDirection(choicePosition));

      return /*#__PURE__*/_react["default"].createElement("div", {
        ref: function ref(_ref) {
          return _ref && (_this2.rootRef = _ref);
        },
        style: style
      }, /*#__PURE__*/_react["default"].createElement(_choices["default"], {
        choicePosition: choicePosition,
        duplicates: duplicates,
        choices: choices,
        value: value,
        disabled: disabled
      }), /*#__PURE__*/_react["default"].createElement(Masked, {
        elementType: 'drag-in-the-blank',
        markup: markup,
        layout: layout,
        value: value,
        choices: choices,
        onChange: onChange,
        disabled: disabled,
        duplicates: duplicates,
        feedback: feedback,
        correctResponse: correctResponse,
        showCorrectAnswer: showCorrectAnswer,
        emptyResponseAreaWidth: emptyResponseAreaWidth,
        emptyResponseAreaHeight: emptyResponseAreaHeight
      }));
    }
  }]);
  return DragInTheBlank;
}(_react["default"].Component);

exports["default"] = DragInTheBlank;
(0, _defineProperty2["default"])(DragInTheBlank, "propTypes", {
  markup: _propTypes["default"].string,
  layout: _propTypes["default"].object,
  choicesPosition: _propTypes["default"].string,
  choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    label: _propTypes["default"].string,
    value: _propTypes["default"].string
  })),
  value: _propTypes["default"].object,
  onChange: _propTypes["default"].func,
  duplicates: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool,
  feedback: _propTypes["default"].object,
  correctResponse: _propTypes["default"].object,
  showCorrectAnswer: _propTypes["default"].bool,
  emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
});
//# sourceMappingURL=drag-in-the-blank.js.map