"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UnderlinedInput = exports.SimpleInput = exports.SecondaryBlock = exports.ScorePoint = exports.ScaleSettings = exports.Row = exports.PrimaryBlockWidth = exports.PrimaryBlock = exports.MultiTraitButton = exports.MaxPointsPicker = exports.HeaderHeightLarge = exports.HeaderHeight = exports.ExpandedInput = exports.DragHandleSpace = exports.BlockWidth = exports.Block = exports.Arrow = void 0;

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

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

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

var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));

var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));

var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

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

var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));

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

var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));

var _utils = require("./utils");

var BlockWidth = 200;
exports.BlockWidth = BlockWidth;
var PrimaryBlockWidth = 200;
exports.PrimaryBlockWidth = PrimaryBlockWidth;
var DragHandleSpace = 32;
exports.DragHandleSpace = DragHandleSpace;
var HeaderHeight = '100px';
exports.HeaderHeight = HeaderHeight;
var HeaderHeightLarge = '160px';
exports.HeaderHeightLarge = HeaderHeightLarge;
var InputHeight = '120px';
var greyBorder = "solid 1px ".concat(_grey["default"][400]);
var Padding = '8px 4px';
var MultiTraitButton = (0, _styles.withStyles)(function (theme) {
  return {
    button: {
      fontSize: theme.typography.fontSize + 2,
      textAlign: 'right',
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'flex-start',
      padding: "".concat(theme.spacing.unit * 1.5, "px ").concat(theme.spacing.unit * 2, "px"),
      width: '114px',
      background: _renderUi.color.secondaryBackground(),
      borderRadius: '4px',
      justifyContent: 'space-around',
      color: _renderUi.color.text(),
      cursor: 'pointer'
    }
  };
})(function (_ref) {
  var classes = _ref.classes,
      children = _ref.children,
      onClick = _ref.onClick;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.button,
    onClick: onClick
  }, /*#__PURE__*/_react["default"].createElement("strong", null, "+"), /*#__PURE__*/_react["default"].createElement("div", null, children));
});
exports.MultiTraitButton = MultiTraitButton;
var PrimaryBlock = (0, _styles.withStyles)({
  primaryBlock: {
    width: "".concat(PrimaryBlockWidth, "px"),
    minWidth: "".concat(PrimaryBlockWidth, "px"),
    position: 'relative',
    padding: '0 10px',
    boxSizing: 'border-box'
  }
})(function (_ref2) {
  var classes = _ref2.classes,
      children = _ref2.children,
      className = _ref2.className;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(classes.primaryBlock, className)
  }, children);
});
exports.PrimaryBlock = PrimaryBlock;
var Block = (0, _styles.withStyles)(function (theme) {
  return {
    block: {
      width: "".concat(BlockWidth, "px"),
      minWidth: "".concat(BlockWidth, "px"),
      '& ul, ol': {
        marginBlockStart: 0,
        paddingInlineStart: theme.spacing.unit * 2
      }
    }
  };
})(function (_ref3) {
  var classes = _ref3.classes,
      children = _ref3.children;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.block
  }, children);
});
exports.Block = Block;
var SecondaryBlock = (0, _styles.withStyles)({
  secondaryBlock: {
    display: 'flex',
    overflowX: 'hidden',
    alignItems: 'flex-end',
    // this is needed to show the editor toolbar!!!
    paddingBottom: '30px'
  }
})(function (_ref4) {
  var classes = _ref4.classes,
      children = _ref4.children,
      setRef = _ref4.setRef,
      width = _ref4.width;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.secondaryBlock,
    style: {
      width: width
    },
    ref: setRef
  }, children);
});
exports.SecondaryBlock = SecondaryBlock;
var Row = (0, _styles.withStyles)({
  row: {
    display: 'flex'
  }
})(function (_ref5) {
  var classes = _ref5.classes,
      children = _ref5.children,
      className = _ref5.className,
      height = _ref5.height;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(classes.row, className),
    style: {
      height: height
    }
  }, children);
});
exports.Row = Row;

var scorePointsStyles = function scorePointsStyles(theme) {
  return {
    scorePointBoxWrapper: {
      padding: '0 10px'
    },
    scorePointBox: {
      display: 'flex',
      borderRadius: '4px',
      background: 'white',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      border: greyBorder
    },
    scorePointBoxDisabled: {
      background: 'none',
      justifyContent: 'center',
      border: '0'
    },
    subLabel: {
      width: '24px',
      textAlign: 'center'
    },
    editableLabel: {
      textAlign: 'left',
      flex: 1,
      border: 'none',
      '& div': {
        padding: 0
      },
      '& > div': {
        border: 'none',
        borderLeft: greyBorder,
        borderRadius: 0,
        padding: Padding
      }
    },
    slateEditor: {
      fontFamily: 'Cerebri'
    },
    errorText: {
      fontSize: theme.typography.fontSize - 2,
      color: theme.palette.error.main,
      paddingBottom: theme.spacing.unit
    }
  };
};

var ScorePoint = (0, _styles.withStyles)(function (theme) {
  return {
    scorePointBoxWrapper: {
      padding: '0 10px'
    },
    scorePointBox: {
      display: 'flex',
      borderRadius: '4px',
      background: 'white',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      border: greyBorder
    },
    scorePointBoxDisabled: {
      background: 'none',
      justifyContent: 'center',
      border: '0'
    },
    subLabel: {
      width: '24px',
      textAlign: 'center'
    },
    editableLabel: {
      textAlign: 'left',
      flex: 1,
      border: 'none',
      '& div': {
        padding: 0
      },
      '& > div': {
        border: 'none',
        borderLeft: greyBorder,
        borderRadius: 0,
        padding: Padding
      }
    },
    slateEditor: {
      fontFamily: 'Cerebri'
    },
    errorText: {
      fontSize: theme.typography.fontSize - 2,
      color: theme.palette.error.main,
      paddingBottom: theme.spacing.unit
    }
  };
})(function (_ref6) {
  var classes = _ref6.classes,
      _ref6$error = _ref6.error,
      error = _ref6$error === void 0 ? '' : _ref6$error,
      scorePointsValue = _ref6.scorePointsValue,
      scoreDescriptor = _ref6.scoreDescriptor,
      pluginProps = _ref6.pluginProps,
      onChange = _ref6.onChange,
      showScorePointLabels = _ref6.showScorePointLabels,
      alignToRight = _ref6.alignToRight,
      spellCheck = _ref6.spellCheck,
      uploadSoundSupport = _ref6.uploadSoundSupport,
      _ref6$imageSupport = _ref6.imageSupport,
      imageSupport = _ref6$imageSupport === void 0 ? {} : _ref6$imageSupport,
      _ref6$mathMlOptions = _ref6.mathMlOptions,
      mathMlOptions = _ref6$mathMlOptions === void 0 ? {} : _ref6$mathMlOptions;
  var scoreBoxClasses = showScorePointLabels ? classes.scorePointBox : "".concat(classes.scorePointBox, " ").concat(classes.scorePointBoxDisabled);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.scorePointBoxWrapper
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: scoreBoxClasses
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.subLabel
  }, scorePointsValue), showScorePointLabels ? /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
    className: classes.editableLabel,
    classes: {
      slateEditor: classes.slateEditor
    },
    error: error,
    markup: scoreDescriptor,
    placeholder: " Enter Label",
    onChange: onChange,
    pluginProps: pluginProps,
    activePlugins: _utils.filteredDefaultPlugins,
    spellCheck: spellCheck,
    toolbarOpts: alignToRight ? {
      alignment: 'right'
    } : {},
    uploadSoundSupport: uploadSoundSupport,
    languageCharactersProps: [{
      language: 'spanish'
    }, {
      language: 'special'
    }],
    mathMlOptions: mathMlOptions,
    imageSupport: imageSupport
  }) : null));
});
exports.ScorePoint = ScorePoint;

var inputStyles = function inputStyles(theme) {
  return {
    root: {
      background: theme.palette.common.white,
      'label + &': {
        marginTop: theme.spacing.unit * 2.5,
        marginBottom: 0,
        width: '80px'
      }
    },
    input: {
      borderRadius: '4px',
      position: 'relative',
      border: greyBorder,
      fontSize: theme.typography.fontSize,
      fontFamily: 'Cerebri Sans',
      padding: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit * 1.5, "px"),
      '&:focus': {
        borderRadius: '4px'
      }
    }
  };
};

var BootstrapInput = (0, _styles.withStyles)(inputStyles)(_InputBase["default"]);

var createMaxScoreOptions = function createMaxScoreOptions(maxMaxPoints) {
  return Array.from({
    length: maxMaxPoints
  }, function (_, i) {
    return i + 1;
  });
};

var MaxPointsPicker = (0, _styles.withStyles)({})(function (_ref7) {
  var maxPoints = _ref7.maxPoints,
      onChange = _ref7.onChange,
      maxMaxPoints = _ref7.maxMaxPoints;
  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], null, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], null, "Max Points"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
    value: maxPoints,
    onChange: onChange,
    input: /*#__PURE__*/_react["default"].createElement(BootstrapInput, null)
  }, createMaxScoreOptions(maxMaxPoints).map(function (maxScore) {
    return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
      key: "menu-item-".concat(maxScore),
      value: maxScore
    }, maxScore);
  })));
});
exports.MaxPointsPicker = MaxPointsPicker;
var SimpleInput = (0, _styles.withStyles)(function (theme) {
  return {
    simpleInput: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      margin: "".concat(theme.spacing.unit * 1.5, "px 0")
    },
    editableLevel: {
      background: theme.palette.common.white,
      width: '60%'
    },
    slateEditor: {
      fontFamily: 'Cerebri'
    }
  };
})(function (_ref8) {
  var classes = _ref8.classes,
      markup = _ref8.markup,
      onChange = _ref8.onChange,
      pluginProps = _ref8.pluginProps,
      label = _ref8.label,
      spellCheck = _ref8.spellCheck,
      uploadSoundSupport = _ref8.uploadSoundSupport,
      _ref8$mathMlOptions = _ref8.mathMlOptions,
      mathMlOptions = _ref8$mathMlOptions === void 0 ? {} : _ref8$mathMlOptions,
      _ref8$imageSupport = _ref8.imageSupport,
      imageSupport = _ref8$imageSupport === void 0 ? {} : _ref8$imageSupport;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.simpleInput
  }, label && /*#__PURE__*/_react["default"].createElement("div", null, label), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
    className: classes.editableLevel,
    classes: {
      slateEditor: classes.slateEditor
    },
    markup: markup,
    onChange: onChange,
    placeholder: "Trait Label",
    pluginProps: pluginProps,
    activePlugins: _utils.filteredDefaultPlugins,
    spellCheck: spellCheck,
    uploadSoundSupport: uploadSoundSupport,
    languageCharactersProps: [{
      language: 'spanish'
    }, {
      language: 'special'
    }],
    mathMlOptions: mathMlOptions,
    imageSupport: imageSupport
  }));
});
exports.SimpleInput = SimpleInput;
var UnderlinedInput = (0, _styles.withStyles)(function (theme) {
  return {
    underlinedInputWrapper: {
      width: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    editableLevel: {
      background: theme.palette.common.white,
      width: '100%',
      '& div': {
        padding: 0
      },
      '& > div': {
        border: 'none',
        borderBottom: greyBorder,
        borderRadius: 0,
        padding: Padding
      }
    },
    slateEditor: {
      fontFamily: 'Cerebri'
    }
  };
})(function (_ref9) {
  var classes = _ref9.classes,
      error = _ref9.error,
      markup = _ref9.markup,
      onChange = _ref9.onChange,
      pluginProps = _ref9.pluginProps,
      label = _ref9.label,
      placeholder = _ref9.placeholder,
      spellCheck = _ref9.spellCheck,
      uploadSoundSupport = _ref9.uploadSoundSupport,
      _ref9$imageSupport = _ref9.imageSupport,
      imageSupport = _ref9$imageSupport === void 0 ? {} : _ref9$imageSupport,
      _ref9$mathMlOptions = _ref9.mathMlOptions,
      mathMlOptions = _ref9$mathMlOptions === void 0 ? {} : _ref9$mathMlOptions;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.underlinedInputWrapper
  }, label && /*#__PURE__*/_react["default"].createElement("div", null, label), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
    className: classes.editableLevel,
    classes: {
      slateEditor: classes.slateEditor
    },
    error: error,
    markup: markup,
    onChange: onChange,
    placeholder: placeholder,
    pluginProps: pluginProps,
    activePlugins: _utils.filteredDefaultPlugins,
    spellCheck: spellCheck,
    uploadSoundSupport: uploadSoundSupport,
    languageCharactersProps: [{
      language: 'spanish'
    }, {
      language: 'special'
    }],
    mathMlOptions: mathMlOptions,
    imageSupport: imageSupport
  }));
});
exports.UnderlinedInput = UnderlinedInput;
var ExpandedInput = (0, _styles.withStyles)({
  slateEditor: {
    fontFamily: 'Cerebri',
    height: InputHeight,
    padding: 0
  },
  prompt: {
    border: 'none',
    margin: '10px',
    marginTop: 0
  }
})(function (_ref10) {
  var classes = _ref10.classes,
      error = _ref10.error,
      markup = _ref10.markup,
      onChange = _ref10.onChange,
      pluginProps = _ref10.pluginProps,
      placeholder = _ref10.placeholder,
      alignToRight = _ref10.alignToRight,
      spellCheck = _ref10.spellCheck,
      uploadSoundSupport = _ref10.uploadSoundSupport,
      _ref10$mathMlOptions = _ref10.mathMlOptions,
      mathMlOptions = _ref10$mathMlOptions === void 0 ? {} : _ref10$mathMlOptions,
      _ref10$imageSupport = _ref10.imageSupport,
      imageSupport = _ref10$imageSupport === void 0 ? {} : _ref10$imageSupport;
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
    className: classes.prompt,
    classes: {
      slateEditor: classes.slateEditor
    },
    error: error,
    markup: markup,
    onChange: onChange,
    placeholder: placeholder,
    pluginProps: pluginProps,
    toolbarOpts: alignToRight ? {
      alignment: 'right'
    } : {},
    spellCheck: spellCheck,
    uploadSoundSupport: uploadSoundSupport,
    languageCharactersProps: [{
      language: 'spanish'
    }, {
      language: 'special'
    }],
    autoWidthToolbar: true,
    mathMlOptions: mathMlOptions,
    imageSupport: imageSupport
  }));
});
exports.ExpandedInput = ExpandedInput;
var ScaleSettings = (0, _styles.withStyles)({
  scaleSettings: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end'
  }
})(function (_ref11) {
  var classes = _ref11.classes,
      children = _ref11.children;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.scaleSettings
  }, children);
});
exports.ScaleSettings = ScaleSettings;
var Arrow = (0, _styles.withStyles)(function (theme) {
  return {
    arrow: {
      position: 'absolute',
      zIndex: 10,
      cursor: 'pointer',
      right: 0,
      alignItems: 'flex-start',
      justifyContent: 'center',
      background: "linear-gradient(to left, ".concat(theme.palette.common.white, ", ").concat(_renderUi.color.background(), ")"),
      boxSizing: 'border-box'
    },
    innerGrey: {
      position: 'absolute',
      zIndex: 11,
      cursor: 'pointer',
      right: 0,
      alignItems: 'flex-start',
      justifyContent: 'center',
      background: "linear-gradient(to left, ".concat(theme.palette.common.white, ", ").concat(_renderUi.color.background(), ")"),
      boxSizing: 'border-box',
      '& svg': {
        position: 'absolute',
        bottom: '-24px'
      }
    }
  };
})(function (_ref12) {
  var classes = _ref12.classes,
      children = _ref12.children,
      className = _ref12.className,
      show = _ref12.show,
      width = _ref12.width,
      onClick = _ref12.onClick,
      left = _ref12.left,
      showLevelTagInput = _ref12.showLevelTagInput;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(classes.arrow, className),
    style: {
      height: '-webkit-fill-available',
      display: show ? 'flex' : 'none',
      width: width,
      left: left,
      background: left ? "linear-gradient(to right, white, ".concat(_renderUi.color.background(), ")") : undefined
    },
    onClick: onClick
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(classes.innerGrey, className),
    style: {
      display: show ? 'flex' : 'none',
      width: width,
      height: showLevelTagInput ? HeaderHeightLarge : HeaderHeight,
      left: 0,
      background: left ? "linear-gradient(to right, ".concat(_renderUi.color.secondaryBackground(), ", ").concat(_renderUi.color.background(), ")") : undefined
    },
    onClick: onClick
  }, children));
});
exports.Arrow = Arrow;
//# sourceMappingURL=common.js.map