"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
require("./index.less");
var _utils = require("../../utils");
var _LayoutInput = _interopRequireDefault(require("./LayoutInput"));
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 KEY_ARROW_DOWN = 'ArrowDown';
var KEY_ARROW_UP = 'ArrowUp';
var removeUnit = function removeUnit(value) {
  if ((0, _utils.isCssVarBind)(value)) {
    return value;
  }
  return (0, _utils.removeUnit)(value);
};
var _default = exports["default"] = function _default(props) {
  var onStyleChange = props.onStyleChange,
    _props$unit = props.unit,
    unit = _props$unit === void 0 ? 'px' : _props$unit,
    styleData = props.styleData,
    layoutPropsConfig = props.layoutPropsConfig;
  var onInputChange = function onInputChange(styleKey, value) {
    if (value != '') {
      // 判断是否是数字
      if (!isNaN(parseInt(value))) {
        onStyleChange([{
          styleKey: styleKey,
          value: (0, _utils.addUnit)(value, unit)
        }]);
      }
    } else {
      onStyleChange([{
        styleKey: styleKey,
        value: null
      }]);
    }
  };
  var onInputKeyDown = function onInputKeyDown(key, styleKey) {
    var onStyleChange = props.onStyleChange,
      _props$unit2 = props.unit,
      unit = _props$unit2 === void 0 ? 'px' : _props$unit2,
      styleData = props.styleData;
    var value = styleData[styleKey] || 0;
    if (key == KEY_ARROW_DOWN) {
      onStyleChange([{
        styleKey: styleKey,
        value: (0, _utils.addUnit)(parseInt(value) - 1, unit)
      }]);
    } else if (key == KEY_ARROW_UP) {
      onStyleChange([{
        styleKey: styleKey,
        value: (0, _utils.addUnit)(parseInt(value) + 1, unit)
      }]);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "layout-box-container"
  }, layoutPropsConfig.isShowMargin && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("margin-top-div", (0, _utils.isCssVarBind)(styleData.marginTop) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.marginTop),
    onChange: function onChange(val) {
      return onInputChange('marginTop', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'marginTop');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("margin-right-div", (0, _utils.isCssVarBind)(styleData.marginBottom) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.marginRight),
    onChange: function onChange(val) {
      return onInputChange('marginRight', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'marginRight');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("margin-bottom-div", (0, _utils.isCssVarBind)(styleData.marginBottom) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement("span", {
    className: "help-txt"
  }, "MARGIN"), /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.marginBottom),
    onChange: function onChange(val) {
      return onInputChange('marginBottom', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'marginBottom');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("margin-left-div", (0, _utils.isCssVarBind)(styleData.marginLeft) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.marginLeft),
    onChange: function onChange(val) {
      return onInputChange('marginLeft', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'marginLeft');
    }
  }))), layoutPropsConfig.isShowPadding && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("padding-top-div", (0, _utils.isCssVarBind)(styleData.paddingTop) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.paddingTop),
    onChange: function onChange(val) {
      return onInputChange('paddingTop', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'paddingTop');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("padding-right-div", (0, _utils.isCssVarBind)(styleData.paddingRight) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.paddingRight),
    onChange: function onChange(val) {
      return onInputChange('paddingRight', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'paddingRight');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("padding-bottom-div", (0, _utils.isCssVarBind)(styleData.paddingBottom) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement("span", {
    className: "help-txt"
  }, "PADDING"), /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.paddingBottom),
    onChange: function onChange(val) {
      return onInputChange('paddingBottom', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'paddingBottom');
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames["default"])("padding-left-div", (0, _utils.isCssVarBind)(styleData.paddingLeft) && 'css-var-bind')
  }, /*#__PURE__*/React.createElement(_LayoutInput["default"], {
    className: "next-noborder",
    placeholder: "0",
    maxLength: 3,
    value: removeUnit(styleData.paddingLeft),
    onChange: function onChange(val) {
      return onInputChange('paddingLeft', val);
    },
    onKeyDown: function onKeyDown(e) {
      return onInputKeyDown(e.key, 'paddingLeft');
    }
  }))));
};