import _NumberPicker from "@alifd/next/es/number-picker";
import _Range from "@alifd/next/es/range";
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 Row from '../../components/row';
import Number from '../../components/number';
import ColorInput from '../../components/color-input';
import { intlLocal } from './locale';
import { addUnit, isEmptyValue } from '../../utils';
import './index.less';
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([{
      styleKey: styleKey,
      value: unit ? addUnit(value, unit) : value
    }]);
  };
  return /*#__PURE__*/React.createElement(_Collapse, {
    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, _extends({
    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, _extends({
    min: 0,
    styleKey: "lineHeight"
  }, props, {
    style: {
      width: '100%'
    },
    useComputedStyle: true
  })))), /*#__PURE__*/React.createElement(Row, {
    title: fontConfig.fontWeight.title,
    styleData: styleData,
    styleKey: ""
  }, /*#__PURE__*/React.createElement(_Select, {
    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, {
    title: fontConfig.fontFamily,
    styleData: styleData,
    styleKey: ""
  }, /*#__PURE__*/React.createElement(_Select, {
    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, _extends({
    title: fontConfig.color,
    styleKey: ""
  }, props), /*#__PURE__*/React.createElement(ColorInput, _extends({
    styleKey: 'color'
  }, props, {
    inputWidth: "100%"
  }))), /*#__PURE__*/React.createElement(Row, _extends({
    title: textAlign.title,
    dataList: textAlign.dataList,
    styleKey: "textAlign"
  }, props)), /*#__PURE__*/React.createElement(Row, _extends({
    title: fontConfig.opacity,
    styleKey: "opacity"
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "opacity-container"
  }, /*#__PURE__*/React.createElement(_Range, {
    style: {
      marginRight: '7px'
    },
    value: !isEmptyValue(styleData.opacity) ? styleData.opacity * 100 : 0,
    onChange: function onChange(val) {
      return onNumberChange('opacity', parseInt(val) / 100);
    }
  }), /*#__PURE__*/React.createElement(_NumberPicker, {
    value: !isEmptyValue(styleData.opacity) ? Math.floor(styleData.opacity * 100) : undefined,
    max: 100,
    min: 0,
    onChange: function onChange(val) {
      return onNumberChange('opacity', isEmptyValue(val) ? null : val / 100);
    }
  })))));
});