"use strict";

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 = _interopRequireDefault(require("react"));
var _menu = _interopRequireDefault(require("./menu"));
var _reactI18next = require("react-i18next");
class FieldSetting extends _react.default.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "onMouseEnter", () => {
      if (!this.props.option) return;
      const container = this.settingRef;
      const {
        height,
        width
      } = container.getBoundingClientRect();
      const position = {
        height,
        width
      };
      this.setState({
        isShowMenu: true,
        position
      });
    });
    (0, _defineProperty2.default)(this, "onMouseLeave", () => {
      this.setState({
        isShowMenu: false
      });
    });
    (0, _defineProperty2.default)(this, "onBoldClick", event => {
      event.stopPropagation();
      const {
        option
      } = this.props;
      const newOption = {
        ...option,
        bold: !option.bold
      };
      this.props.onUpdateOption(newOption);
    });
    (0, _defineProperty2.default)(this, "onItalicClick", event => {
      event.stopPropagation();
      const {
        option
      } = this.props;
      const newOption = {
        ...option,
        italic: !option.italic
      };
      this.props.onUpdateOption(newOption);
    });
    (0, _defineProperty2.default)(this, "setSettingRef", ref => {
      this.settingRef = ref;
    });
    this.state = {
      isShowMenu: false,
      position: {
        top: 0,
        left: 0
      }
    };
  }
  render() {
    const {
      option,
      t
    } = this.props;
    const isDisable = !option;
    const {
      bold: isBold,
      italic: isItalic
    } = option || {};
    const {
      isShowMenu
    } = this.state;
    const className = `sf-field-setting ${isDisable ? 'disable' : ''} option-item`;
    return /*#__PURE__*/_react.default.createElement("span", {
      ref: this.setSettingRef,
      className: className,
      onMouseEnter: this.onMouseEnter,
      onMouseLeave: this.onMouseLeave
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: "iconfont icon-text-style"
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "label"
    }, t('Font_style')), /*#__PURE__*/_react.default.createElement("span", {
      className: "icon-container"
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: "iconfont icon-caret-up op-icon"
    })), isShowMenu && /*#__PURE__*/_react.default.createElement(_menu.default, {
      position: this.state.position
    }, /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
      iconClass: 'iconfont icon-bold',
      isChecked: isBold,
      onClick: this.onBoldClick
    }, t('bold')), /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
      iconClass: 'iconfont icon-italic',
      isChecked: isItalic,
      onClick: this.onItalicClick
    }, t('italic'))));
  }
}
var _default = exports.default = (0, _reactI18next.withTranslation)('seafile-editor')(FieldSetting);