"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactI18next = require("react-i18next");
var _tableOperations = require("../table-operations");
var _constants = require("../../../../constants");
var _insertTableElement = _interopRequireDefault(require("./insert-table-element"));
var _constant = require("../constant");
var _core = require("../../../core");
var _elementTypes = require("../../../constants/element-types");
var _horizontalAlignPopover = _interopRequireDefault(require("./horizontal-align-popover"));
require("./style.css");
const ContextMenu = _ref => {
  var _getSelectedNodeByTyp, _cellDom$style;
  let {
    element,
    position,
    editor,
    handleCloseContextMenu
  } = _ref;
  const [contextMenuStyle, setContextMenuStyle] = (0, _react.useState)({});
  const contextMenuRef = (0, _react.useRef)(null);
  const horizontalAlignRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const tableCellNodeId = (_getSelectedNodeByTyp = (0, _core.getSelectedNodeByType)(editor, _elementTypes.TABLE_CELL)) === null || _getSelectedNodeByTyp === void 0 ? void 0 : _getSelectedNodeByTyp.id;
  const cellDom = document.querySelector(`td[data-id="${tableCellNodeId}"]`);
  const horizontalAlign = cellDom === null || cellDom === void 0 ? void 0 : (_cellDom$style = cellDom.style) === null || _cellDom$style === void 0 ? void 0 : _cellDom$style[_constant.TABLE_CELL_STYLE.TEXT_ALIGN];
  const currentRowsCount = (0, _react.useMemo)(() => {
    const rows = element.children;
    return rows.length;
  }, [element.children]);
  const currentColumnsCount = (0, _react.useMemo)(() => {
    const rows = element.children;
    const cols = rows[0].children;
    return cols.length;
  }, [element.children]);
  (0, _react.useLayoutEffect)(() => {
    const {
      top,
      left
    } = position;
    setContextMenuStyle({
      top,
      left,
      zIndex: '1071',
      display: 'block'
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [position]);
  const handleClickOperationBtn = function (callback) {
    for (var _len = arguments.length, arg = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      arg[_key - 1] = arguments[_key];
    }
    callback && callback(editor, ...arg);
    handleCloseContextMenu();
  };
  const _insertTableChildren = (type, position, count) => {
    (0, _tableOperations.insertTableElement)(editor, type, position, count);
    handleCloseContextMenu();
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    contentEditable: false,
    style: contextMenuStyle,
    ref: contextMenuRef,
    className: "sf-context-menu-wrapper"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-context-menu sf-dropdown-list"
  }, /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
    type: _constant.TABLE_ELEMENT.ROW,
    count: 1,
    currentCount: currentRowsCount,
    position: _constant.TABLE_ELEMENT_POSITION.BEFORE,
    insertTableElement: _insertTableChildren
  }), /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
    type: _constant.TABLE_ELEMENT.ROW,
    count: 1,
    currentCount: currentRowsCount,
    position: _constant.TABLE_ELEMENT_POSITION.AFTER,
    insertTableElement: _insertTableChildren
  }), /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
    type: _constant.TABLE_ELEMENT.COLUMN,
    count: 1,
    currentCount: currentColumnsCount,
    position: _constant.TABLE_ELEMENT_POSITION.BEFORE,
    insertTableElement: _insertTableChildren
  }), /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
    type: _constant.TABLE_ELEMENT.COLUMN,
    count: 1,
    currentCount: currentColumnsCount,
    position: _constant.TABLE_ELEMENT_POSITION.AFTER,
    insertTableElement: _insertTableChildren
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: 'sf-divider dropdown-divider'
  }), /*#__PURE__*/_react.default.createElement("button", {
    onMouseDown: () => handleClickOperationBtn(_tableOperations.removeRow),
    className: 'sf-context-menu-item sf-dropdown-menu-item'
  }, t('Delete_row')), /*#__PURE__*/_react.default.createElement("button", {
    onMouseDown: () => handleClickOperationBtn(_tableOperations.removeColumn),
    className: 'sf-context-menu-item sf-dropdown-menu-item'
  }, t('Delete_column')), /*#__PURE__*/_react.default.createElement("button", {
    onMouseDown: () => handleClickOperationBtn(_tableOperations.removeTable),
    className: 'sf-context-menu-item sf-dropdown-menu-item'
  }, t('Delete_table')), /*#__PURE__*/_react.default.createElement("div", {
    className: 'sf-divider dropdown-divider'
  }), /*#__PURE__*/_react.default.createElement("button", {
    ref: horizontalAlignRef,
    className: "sf-context-menu-item sf-dropdown-menu-item side-extendable"
  }, /*#__PURE__*/_react.default.createElement("span", null, t('Horizontal_align')), /*#__PURE__*/_react.default.createElement("i", {
    className: "iconfont icon-right-slide"
  })), horizontalAlignRef.current && /*#__PURE__*/_react.default.createElement(_horizontalAlignPopover.default, {
    target: horizontalAlignRef,
    editor: editor,
    horizontalAlign: horizontalAlign
  })));
};
var _default = exports.default = ContextMenu;