"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 _reactstrap = require("reactstrap");
var _classnames = _interopRequireDefault(require("classnames"));
var _core = require("../../../../core");
var _constants = require("../../../../../constants");
var _tableOperations = require("../../table-operations");
require("./style.css");
const HorizontalAlignPopover = _ref => {
  let {
    target,
    editor,
    readonly,
    horizontalAlign
  } = _ref;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const setTextAlignStyle = (0, _react.useCallback)(textAlign => {
    if (readonly) return;
    (0, _tableOperations.changeColumnAlign)(editor, textAlign);
    const focusPoint = editor.selection.focus;
    // prevent select all text in the editor
    (0, _core.focusEditor)(editor, focusPoint);
    // Select last focus point
    setTimeout(() => {
      (0, _core.focusEditor)(editor, focusPoint);
    }, 0);
  }, [editor, readonly]);
  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
    target: target.current,
    trigger: "hover",
    placement: "right-start",
    hideArrow: true,
    fade: false,
    offset: [0, 8],
    popperClassName: "sf-table-alignment-popover sf-popover-box-shadow"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-dropdown-menu sf-table-alignment-menu"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-dropdown-menu-item",
    onMouseDown: () => setTextAlignStyle('left')
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: (0, _classnames.default)('mdfont md-check-mark', {
      active: !horizontalAlign || horizontalAlign === 'left'
    })
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "active"
  }, t('Left'))), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-dropdown-menu-item",
    onMouseDown: () => setTextAlignStyle('center')
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: (0, _classnames.default)('mdfont md-check-mark', {
      active: horizontalAlign === 'center'
    })
  }), /*#__PURE__*/_react.default.createElement("span", null, t('Center'))), /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-dropdown-menu-item",
    onMouseDown: () => setTextAlignStyle('right')
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: (0, _classnames.default)('mdfont md-check-mark', {
      active: horizontalAlign === 'right'
    })
  }), /*#__PURE__*/_react.default.createElement("span", null, t('Right')))));
};
var _default = exports.default = HorizontalAlignPopover;