"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

require("./index.less");

var _ColorPicker = _interopRequireDefault(require("../ColorPicker"));

var _Iconfont = _interopRequireDefault(require("../Iconfont"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var __extends = void 0 && (void 0).__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) {
        if (b.hasOwnProperty(p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    _extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var textAlignMenu = [{
  id: 1,
  name: 'left',
  icon: 'icon-align-left'
}, {
  id: 2,
  name: 'center',
  icon: 'icon-align-center'
}, {
  id: 3,
  name: 'right',
  icon: 'icon-align-right'
}];

var FontStyles =
/** @class */
function (_super) {
  __extends(FontStyles, _super);

  function FontStyles() {
    var _this = _super !== null && _super.apply(this, arguments) || this;

    _this.state = {
      visibility: false
    };

    _this.updateSetting = function (type, value) {
      var _a;

      _this.props.onChange(__assign(__assign({}, _this.props.value), (_a = {}, _a[type] = value, _a)));
    };

    return _this;
  }

  FontStyles.prototype.render = function () {
    var _this = this;

    var _a = this.props,
        value = _a.value,
        showTextAlign = _a.showTextAlign;
    var visibility = this.state.visibility;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "m-font-styles"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: (0, _classnames["default"])('item', {
        active: value.fontStyle === 'italic'
      }),
      onClick: function onClick() {
        return _this.updateSetting('fontStyle', value.fontStyle === 'italic' ? 'normal' : 'italic');
      }
    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
      color: value.fontStyle === 'italic' ? '#2F54EB' : '#000',
      size: "20px",
      type: "icon-italic"
    })), /*#__PURE__*/_react["default"].createElement("span", {
      className: "item item-color",
      onClick: function onClick() {
        return _this.setState({
          visibility: true
        });
      }
    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
      color: "#000",
      size: "20px",
      type: "icon-A"
    }), /*#__PURE__*/_react["default"].createElement("span", {
      className: "text-color-line",
      style: {
        backgroundColor: value.color
      }
    })), showTextAlign && /*#__PURE__*/_react["default"].createElement("span", {
      className: "item item-text-align"
    }, textAlignMenu.map(function (m) {
      return /*#__PURE__*/_react["default"].createElement("span", {
        key: m.id,
        className: (0, _classnames["default"])('item-icon', {
          active: value.textAlign === m.name
        }),
        onClick: function onClick() {
          return _this.updateSetting('textAlign', m.name);
        }
      }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
        color: "#000",
        size: "20px",
        type: m.icon
      }));
    })), /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
      color: value.color,
      onChangeColor: function onChangeColor(color) {
        return _this.updateSetting('color', color);
      },
      onClose: function onClose() {
        return _this.setState({
          visibility: false
        });
      },
      type: "hex",
      visibility: visibility
    }));
  };

  FontStyles.defaultProps = {
    onChange: function onChange() {},
    value: {
      // fontWeight: 400,
      fontStyle: 'normal',
      color: '#000',
      textAlign: 'left'
    },
    showTextAlign: false
  };
  return FontStyles;
}(_react["default"].Component);

var _default = FontStyles;
exports["default"] = _default;