import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";
import _Collapse from "@alifd/next/es/collapse";
import * as React from 'react';
import ColorInput from '../../components/color-input';
import { intlLocal } from './locale';
import { addUnit } from '../../utils';
import './index.less';
import StyleItemSetter from "../../components/style-item-setter";
import RadioGroup from "../../components/radio-group";
import StyleSizeSetter from "../../components/style-size-setter";
var Panel = _Collapse.Panel;
var fontConfig = intlLocal();
export default (function (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 = _extends({}, defaultFontPropsConfig, fontPropsConfig);
  var fontWeight = fontConfig.fontWeight,
    textAlign = fontConfig.textAlign;
  var onNumberChange = function onNumberChange(styleKey, value, unit) {
    onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
      styleKey: styleKey,
      value: unit ? addUnit(value, unit) : value
    }]);
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "lc-field lc-block-field",
    style: {
      background: "white"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "lc-field-head"
  }, "\u5B57\u4F53"), /*#__PURE__*/React.createElement("div", {
    className: "lc-field-body"
  }, /*#__PURE__*/React.createElement(StyleItemSetter.TowColumnLayout, null, /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: fontConfig.fontSize,
    dataInput: /*#__PURE__*/React.createElement(StyleSizeSetter, {
      styleData: styleData,
      styleKey: "fontSize",
      onStyleChange: onStyleChange
    })
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: fontConfig.lineHeight,
    dataInput: /*#__PURE__*/React.createElement(StyleSizeSetter, {
      styleData: styleData,
      styleKey: "lineHeight",
      onStyleChange: onStyleChange
    })
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: fontConfig.fontWeight.title,
    dataInput: /*#__PURE__*/React.createElement(_Select, {
      dataSource: fontWeight.dataList,
      style: {
        width: '100%'
      },
      value: styleData.fontWeight,
      hasClear: true,
      onChange: function onChange(val) {
        return onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
          styleKey: 'fontWeight',
          value: val
        }]);
      }
    })
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "字体",
    dataInput: /*#__PURE__*/React.createElement(_Select, {
      dataSource: propsConfig.fontFamilyList,
      style: {
        width: '100%'
      },
      value: styleData.fontFamily,
      hasClear: true,
      onChange: function onChange(val) {
        return onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
          styleKey: 'fontFamily',
          value: val
        }]);
      }
    })
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "颜色",
    dataInput: /*#__PURE__*/React.createElement(ColorInput, _extends({
      styleKey: 'color'
    }, props, {
      inputWidth: "100%"
    }))
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "对齐",
    dataInput: /*#__PURE__*/React.createElement(RadioGroup, _extends({
      styleKey: 'textAlign',
      dataList: textAlign.dataList
    }, props))
  })))));
});