"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.TraitsHeaderTile = 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 _styles = require("@material-ui/core/styles");

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));

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

var _common = require("./common");

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 styles = function styles(theme) {
  return {
    label: {
      textAlign: 'center',
      width: '140px',
      border: 'none',
      margin: theme.spacing.unit,
      padding: '10px 0',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-around'
    },
    greyHeader: {
      background: _renderUi.color.secondaryBackground(),
      borderRadius: '4px',
      position: 'relative',
      marginBottom: theme.spacing.unit * 2
    },
    primaryBlockGreyHeader: {
      paddingTop: theme.spacing.unit * 1.5
    },
    scorePointErrorText: {
      position: 'absolute',
      fontSize: theme.typography.fontSize - 2,
      color: theme.palette.error.main,
      paddingTop: theme.spacing.unit / 2
    }
  };
};

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

  var _super = _createSuper(TraitsHeaderTile);

  function TraitsHeaderTile() {
    var _this;

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

    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), "state", {
      anchorEl: null
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onScorePointLabelChange", function (_ref) {
      var scorePointLabel = _ref.scorePointLabel,
          value = _ref.value;
      var _this$props = _this.props,
          scorePointsLabels = _this$props.scorePointsLabels,
          onScaleChange = _this$props.onScaleChange;
      if (value < 0 || value >= scorePointsLabels.length) return;
      scorePointsLabels[value] = scorePointLabel;
      onScaleChange({
        scorePointsLabels: scorePointsLabels
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event) {
      return _this.setState({
        anchorEl: event.currentTarget
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function () {
      return _this.setState({
        anchorEl: null
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollToPosition", function (position) {
      return _this.secondaryBlock.scrollTo({
        left: position
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openMenu", function () {
      _this.props.showDeleteScaleModal();

      _this.handleClose();
    });
    return _this;
  }

  (0, _createClass2["default"])(TraitsHeaderTile, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (nextProps.currentPosition !== this.props.currentPosition) {
        this.scrollToPosition(nextProps.currentPosition);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          scorePointsValues = _this$props2.scorePointsValues,
          scorePointsLabels = _this$props2.scorePointsLabels,
          traitLabel = _this$props2.traitLabel,
          classes = _this$props2.classes,
          currentPosition = _this$props2.currentPosition,
          showStandards = _this$props2.showStandards,
          onTraitLabelChange = _this$props2.onTraitLabelChange,
          showDescription = _this$props2.showDescription,
          showLevelTagInput = _this$props2.showLevelTagInput,
          maxPoints = _this$props2.maxPoints,
          updateMaxPointsFieldValue = _this$props2.updateMaxPointsFieldValue,
          scaleIndex = _this$props2.scaleIndex,
          showScorePointLabels = _this$props2.showScorePointLabels,
          secondaryBlockWidth = _this$props2.secondaryBlockWidth,
          setSecondaryBlockRef = _this$props2.setSecondaryBlockRef,
          spellCheck = _this$props2.spellCheck,
          uploadSoundSupport = _this$props2.uploadSoundSupport,
          maxPointsEnabled = _this$props2.maxPointsEnabled,
          _this$props2$mathMlOp = _this$props2.mathMlOptions,
          mathMlOptions = _this$props2$mathMlOp === void 0 ? {} : _this$props2$mathMlOp,
          _this$props2$errors = _this$props2.errors,
          errors = _this$props2$errors === void 0 ? {} : _this$props2$errors,
          maxMaxPoints = _this$props2.maxMaxPoints,
          _this$props2$labelPlu = _this$props2.labelPluginProps,
          labelPluginProps = _this$props2$labelPlu === void 0 ? {} : _this$props2$labelPlu,
          _this$props2$imageSup = _this$props2.imageSupport,
          imageSupport = _this$props2$imageSup === void 0 ? {} : _this$props2$imageSup;
      var anchorEl = this.state.anchorEl;
      return /*#__PURE__*/_react["default"].createElement(_common.Row, {
        className: classes.greyHeader,
        height: showLevelTagInput ? _common.HeaderHeightLarge : _common.HeaderHeight
      }, /*#__PURE__*/_react["default"].createElement(_common.PrimaryBlock, {
        className: classes.primaryBlockGreyHeader
      }, showLevelTagInput && /*#__PURE__*/_react["default"].createElement(_common.SimpleInput, {
        markup: traitLabel || 'Trait',
        onChange: onTraitLabelChange,
        pluginProps: labelPluginProps,
        spellCheck: spellCheck,
        label: "Level Label",
        uploadSoundSupport: uploadSoundSupport,
        mathMlOptions: mathMlOptions,
        imageSupport: imageSupport
      }), /*#__PURE__*/_react["default"].createElement(_common.ScaleSettings, null, /*#__PURE__*/_react["default"].createElement("div", null, "Scale ", scaleIndex + 1), maxPointsEnabled && /*#__PURE__*/_react["default"].createElement(_common.MaxPointsPicker, {
        maxPoints: maxPoints,
        maxMaxPoints: maxMaxPoints,
        onChange: updateMaxPointsFieldValue
      }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
        "aria-label": "more",
        "aria-controls": "long-menu",
        "aria-haspopup": "true",
        onClick: this.handleClick
      }, /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
        id: "long-menu",
        anchorEl: anchorEl,
        keepMounted: true,
        open: !!anchorEl,
        onClose: this.handleClose
      }, ['Remove Scale'].map(function (option) {
        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
          key: option,
          onClick: _this2.openMenu
        }, option);
      }))))), /*#__PURE__*/_react["default"].createElement(_common.SecondaryBlock, {
        setRef: function setRef(ref) {
          if (ref) {
            _this2.secondaryBlock = ref;
            setSecondaryBlockRef(ref);
          }
        },
        width: "".concat(secondaryBlockWidth, "px")
      }, showStandards && /*#__PURE__*/_react["default"].createElement(_common.Block, null, /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.label
      }, "Standard(s)")), showDescription && /*#__PURE__*/_react["default"].createElement(_common.Block, null, /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.label
      }, "Description")), scorePointsValues.map(function (scorePointsValue, index) {
        var adjustedBlockWidth = _common.BlockWidth + 2 * 8; // 8 is padding

        var remainingSpace = secondaryBlockWidth - adjustedBlockWidth * index + currentPosition - 128;
        var value = scorePointsValues.length - index - 1;
        var scoreDescriptor;
        var error;

        try {
          scoreDescriptor = scorePointsLabels[value] || '';
          error = errors[value] || '';
        } catch (e) {
          scoreDescriptor = '';
        }

        return /*#__PURE__*/_react["default"].createElement(_common.Block, {
          key: "secondary-block-part-".concat(index)
        }, /*#__PURE__*/_react["default"].createElement(_common.ScorePoint, {
          scorePointsValue: scorePointsValue,
          error: error,
          scoreDescriptor: scoreDescriptor,
          pluginProps: labelPluginProps,
          showScorePointLabels: showScorePointLabels,
          onChange: function onChange(scorePointLabel) {
            return _this2.onScorePointLabelChange({
              scorePointLabel: scorePointLabel,
              value: value
            });
          },
          alignToRight: remainingSpace < 296 && scorePointsValue < maxPoints // 296 is the space required for the toolbar
          ,
          spellCheck: spellCheck,
          uploadSoundSupport: uploadSoundSupport,
          mathMlOptions: mathMlOptions,
          imageSupport: imageSupport
        }), error && /*#__PURE__*/_react["default"].createElement("div", {
          className: classes.scorePointErrorText
        }, error));
      })));
    }
  }]);
  return TraitsHeaderTile;
}(_react["default"].Component);

exports.TraitsHeaderTile = TraitsHeaderTile;
(0, _defineProperty2["default"])(TraitsHeaderTile, "propTypes", {
  maxPointsEnabled: _propTypes["default"].bool,
  spellCheck: _propTypes["default"].bool,
  errors: _propTypes["default"].object
});
TraitsHeaderTile.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  onTraitLabelChange: _propTypes["default"].func,
  onScaleChange: _propTypes["default"].func,
  scorePointsValues: _propTypes["default"].arrayOf(_propTypes["default"].number),
  scorePointsLabels: _propTypes["default"].arrayOf(_propTypes["default"].string),
  traitLabel: _propTypes["default"].string,
  showStandards: _propTypes["default"].bool,
  showLevelTagInput: _propTypes["default"].bool,
  showDescription: _propTypes["default"].bool,
  maxPoints: _propTypes["default"].number,
  updateMaxPointsFieldValue: _propTypes["default"].func,
  scaleIndex: _propTypes["default"].number,
  currentPosition: _propTypes["default"].number,
  secondaryBlockWidth: _propTypes["default"].number,
  showDeleteScaleModal: _propTypes["default"].func,
  showScorePointLabels: _propTypes["default"].bool,
  setSecondaryBlockRef: _propTypes["default"].func,
  uploadSoundSupport: _propTypes["default"].object,
  maxMaxPoints: _propTypes["default"].number,
  labelPluginProps: _propTypes["default"].object,
  imageSupport: _propTypes["default"].shape({
    add: _propTypes["default"].func.isRequired,
    "delete": _propTypes["default"].func.isRequired
  })
};

var _default = (0, _styles.withStyles)(styles)(TraitsHeaderTile);

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