"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
var _range = _interopRequireDefault(require("@alifd/next/lib/range"));
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
var React = _interopRequireWildcard(require("react"));
var _row = _interopRequireDefault(require("../../components/row"));
var _number = _interopRequireDefault(require("../../components/number"));
var _colorInput = _interopRequireDefault(require("../../components/color-input"));
var _locale = require("./locale");
var _utils = require("../../utils");
require("./index.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var Panel = _collapse["default"].Panel;
var fontConfig = (0, _locale.intlLocal)();
var _default = exports["default"] = function _default(props) {
  var styleData = props.styleData,
    onStyleChange = props.onStyleChange,
    fontPropsConfig = props.fontPropsConfig;
  var defaultFontPropsConfig = {
    // display 展示列表
    fontFamilyList: [{
      value: 'Helvetica',
      label: 'Helvetica'
    }, {
      value: 'Arial',
      label: 'Arial'
    }, {
      value: 'serif',
      label: 'serif'
    }]
  };

  // 配置合并
  var propsConfig = (0, _extends2["default"])({}, defaultFontPropsConfig, fontPropsConfig);
  var fontWeight = fontConfig.fontWeight,
    textAlign = fontConfig.textAlign;
  var onNumberChange = function onNumberChange(styleKey, value, unit) {
    onStyleChange([{
      styleKey: styleKey,
      value: unit ? (0, _utils.addUnit)(value, unit) : value
    }]);
  };
  return /*#__PURE__*/React.createElement(_collapse["default"], {
    defaultExpandedKeys: ['0']
  }, /*#__PURE__*/React.createElement(Panel, {
    title: fontConfig.title,
    className: "font-style-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "inner-row-contaienr"
  }, /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement("span", {
    className: "row-item-title"
  }, fontConfig.fontSize), /*#__PURE__*/React.createElement(_number["default"], (0, _extends2["default"])({
    max: 100,
    min: 0,
    styleKey: "fontSize"
  }, props, {
    style: {
      marginRight: '10px',
      width: '100%'
    },
    useComputedStyle: true
  }))), /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement("span", {
    className: "row-item-title"
  }, fontConfig.lineHeight), /*#__PURE__*/React.createElement(_number["default"], (0, _extends2["default"])({
    min: 0,
    styleKey: "lineHeight"
  }, props, {
    style: {
      width: '100%'
    },
    useComputedStyle: true
  })))), /*#__PURE__*/React.createElement(_row["default"], {
    title: fontConfig.fontWeight.title,
    styleData: styleData,
    styleKey: ""
  }, /*#__PURE__*/React.createElement(_select["default"], {
    dataSource: fontWeight.dataList,
    style: {
      width: '100%'
    },
    value: styleData.fontWeight,
    hasClear: true,
    onChange: function onChange(val) {
      return onStyleChange([{
        styleKey: 'fontWeight',
        value: val
      }]);
    }
  })), /*#__PURE__*/React.createElement(_row["default"], {
    title: fontConfig.fontFamily,
    styleData: styleData,
    styleKey: ""
  }, /*#__PURE__*/React.createElement(_select["default"], {
    dataSource: propsConfig.fontFamilyList,
    style: {
      width: '100%'
    },
    value: styleData.fontFamily,
    hasClear: true,
    onChange: function onChange(val) {
      return onStyleChange([{
        styleKey: 'fontFamily',
        value: val
      }]);
    }
  })), /*#__PURE__*/React.createElement(_row["default"], (0, _extends2["default"])({
    title: fontConfig.color,
    styleKey: ""
  }, props), /*#__PURE__*/React.createElement(_colorInput["default"], (0, _extends2["default"])({
    styleKey: 'color'
  }, props, {
    inputWidth: "100%"
  }))), /*#__PURE__*/React.createElement(_row["default"], (0, _extends2["default"])({
    title: textAlign.title,
    dataList: textAlign.dataList,
    styleKey: "textAlign"
  }, props)), /*#__PURE__*/React.createElement(_row["default"], (0, _extends2["default"])({
    title: fontConfig.opacity,
    styleKey: "opacity"
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "opacity-container"
  }, /*#__PURE__*/React.createElement(_range["default"], {
    style: {
      marginRight: '7px'
    },
    value: !(0, _utils.isEmptyValue)(styleData.opacity) ? styleData.opacity * 100 : 0,
    onChange: function onChange(val) {
      return onNumberChange('opacity', parseInt(val) / 100);
    }
  }), /*#__PURE__*/React.createElement(_numberPicker["default"], {
    value: !(0, _utils.isEmptyValue)(styleData.opacity) ? Math.floor(styleData.opacity * 100) : undefined,
    max: 100,
    min: 0,
    onChange: function onChange(val) {
      return onNumberChange('opacity', (0, _utils.isEmptyValue)(val) ? null : val / 100);
    }
  })))));
};