import _Input from "@alifd/next/es/input";
import * as React from 'react';
import { intlLocal } from './locale';
import Row from '../../components/row';
import { addUnit, removeUnit } from '../../utils';
import './index.less';
var KEY_ARROW_DOWN = 'ArrowDown';
var KEY_ARROW_UP = 'ArrowUp';
var positionConfig = intlLocal();
export default (function (props) {
  var onStyleChange = props.onStyleChange,
    styleData = props.styleData,
    unit = props.unit;
  var positionTemplete = positionConfig.positionTemplete;
  var onInputChange = function onInputChange(styleKey, value) {
    if (value != '') {
      // 判断是否是数字
      if (!isNaN(parseInt(value))) {
        onStyleChange([{
          styleKey: styleKey,
          value: addUnit(value, unit)
        }]);
      }
    } else {
      onStyleChange([{
        styleKey: styleKey,
        value: null
      }]);
    }
  };
  var onInputKeyDown = function onInputKeyDown(key, styleKey) {
    var onStyleChange = props.onStyleChange,
      _props$unit = props.unit,
      unit = _props$unit === void 0 ? 'px' : _props$unit,
      styleData = props.styleData;
    var value = styleData[styleKey] || 0;
    if (key == KEY_ARROW_DOWN) {
      onStyleChange([{
        styleKey: styleKey,
        value: addUnit(parseInt(value) - 1, unit)
      }]);
    } else if (key == KEY_ARROW_UP) {
      onStyleChange([{
        styleKey: styleKey,
        value: addUnit(parseInt(value) + 1, unit)
      }]);
    }
  };
  var onPositionTempleteChange = function onPositionTempleteChange(styleDataList) {
    // 解析模板的值
    styleDataList.map(function (item) {
      if (item.value == 'topLeft') {
        onStyleChange([{
          styleKey: 'top',
          value: 0
        }, {
          styleKey: 'left',
          value: 0
        }, {
          styleKey: 'bottom',
          value: null
        }, {
          styleKey: 'right',
          value: null
        }]);
      } else if (item.value === 'topRight') {
        onStyleChange([{
          styleKey: 'top',
          value: 0
        }, {
          styleKey: 'left',
          value: null
        }, {
          styleKey: 'bottom',
          value: null
        }, {
          styleKey: 'right',
          value: 0
        }]);
      } else if (item.value === 'bottomLeft') {
        onStyleChange([{
          styleKey: 'top',
          value: null
        }, {
          styleKey: 'left',
          value: 0
        }, {
          styleKey: 'bottom',
          value: 0
        }, {
          styleKey: 'right',
          value: null
        }]);
      } else if (item.value === 'bottomRight') {
        onStyleChange([{
          styleKey: 'top',
          value: null
        }, {
          styleKey: 'left',
          value: null
        }, {
          styleKey: 'bottom',
          value: 0
        }, {
          styleKey: 'right',
          value: 0
        }]);
      }
      return item;
    });
  };
  return /*#__PURE__*/React.createElement("div", null, styleData['position'] && styleData['position'] === 'absolute' && /*#__PURE__*/React.createElement(Row, {
    dataList: positionTemplete.dataList,
    onStyleChange: onPositionTempleteChange,
    styleKey: 'positionTemplete'
  }), /*#__PURE__*/React.createElement("div", {
    className: "position-box-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "top-div"
  }, /*#__PURE__*/React.createElement(_Input, {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: removeUnit(styleData['top']),
    onChange: function onChange(val) {
      return onInputChange('top', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'top');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "right-div"
  }, /*#__PURE__*/React.createElement(_Input, {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: removeUnit(styleData['right']),
    onChange: function onChange(val) {
      return onInputChange('right', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'right');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "bottom-div"
  }, /*#__PURE__*/React.createElement(_Input, {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: removeUnit(styleData['bottom']),
    onChange: function onChange(val) {
      return onInputChange('bottom', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'bottom');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "left-div"
  }, /*#__PURE__*/React.createElement(_Input, {
    className: "next-noborder",
    placeholder: "auto",
    maxLength: 4,
    value: removeUnit(styleData['left']),
    onChange: function onChange(val) {
      return onInputChange('left', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'left');
    }
  }))));
});