"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactstrap = require("reactstrap");
var _isHotkey = _interopRequireDefault(require("is-hotkey"));
var _constant = require("../constant");
var _reactI18next = require("react-i18next");
class InsertTableElement extends _react.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "insertTableElement", () => {
      const {
        type,
        position
      } = this.props;
      const {
        count
      } = this.state;
      this.props.insertTableElement(type, position, count);
    });
    (0, _defineProperty2.default)(this, "getTip", () => {
      const {
        type,
        position,
        t
      } = this.props;
      if (type === _constant.TABLE_ELEMENT.ROW) {
        return position === _constant.TABLE_ELEMENT_POSITION.AFTER ? t('Insert_below') : t('Insert_above');
      }
      return position === _constant.TABLE_ELEMENT_POSITION.AFTER ? t('Insert_on_the_right') : t('Insert_on_the_left');
    });
    (0, _defineProperty2.default)(this, "onMouseDown", e => {
      e.stopPropagation();
    });
    (0, _defineProperty2.default)(this, "onKeyDown", event => {
      if ((0, _isHotkey.default)('enter', event)) {
        event.preventDefault();
        this.insertTableElement();
        return;
      }
    });
    (0, _defineProperty2.default)(this, "onChange", event => {
      const value = event.target.value || '0';
      const newValue = value ? value.replace(/[^\d,]/g, '') : value;
      if (newValue === this.state.count) return;
      const {
        currentCount
      } = this.props;
      const numberValue = parseInt(newValue);
      if (currentCount + numberValue > this.maxCount) {
        this.setState({
          count: this.maxCount - currentCount
        });
        return;
      }
      this.setState({
        count: numberValue
      });
    });
    this.state = {
      count: props.count || 1
    };
    this.maxCount = props.type === _constant.TABLE_ELEMENT.ROW ? _constant.TABLE_MAX_ROWS : _constant.TABLE_MAX_COLUMNS;
  }
  render() {
    const {
      count
    } = this.state;
    const {
      t,
      type,
      currentCount
    } = this.props;
    const isDisabled = currentCount >= this.maxCount;
    return /*#__PURE__*/_react.default.createElement("button", {
      onMouseDown: this.insertTableElement,
      className: "sf-context-menu-item sf-dropdown-menu-item",
      disabled: isDisabled
    }, this.getTip(), /*#__PURE__*/_react.default.createElement("div", {
      className: "insert-number"
    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
      className: "insert-number-input",
      value: count,
      disabled: isDisabled,
      onMouseDown: this.onMouseDown,
      onKeyDown: this.onKeyDown,
      onChange: this.onChange
    }), /*#__PURE__*/_react.default.createElement("span", null, type === _constant.TABLE_ELEMENT.ROW ? t('Row(s)') : t('Column(s)'))));
  }
}
var _default = exports.default = (0, _reactI18next.withTranslation)('seafile-editor')(InsertTableElement);