"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _style = require("../../input/style");
var _variants = require("../../input/style/variants");
var _token = require("../../input/style/token");
var _internal = require("../../theme/internal");
var _style2 = require("../../style");
var _compactItem = require("../../style/compact-item");
const genInputNumberStyles = token => {
  const {
    componentCls,
    lineWidth,
    lineType,
    colorBorder,
    borderRadius,
    fontSizeLG,
    controlHeightLG,
    controlHeightSM,
    colorError,
    inputPaddingHorizontalSM,
    motionDurationMid,
    colorPrimary,
    controlHeight,
    inputPaddingHorizontal,
    colorBgContainer,
    borderRadiusSM,
    borderRadiusLG,
    controlWidth,
    handleVisible
  } = token;
  return [{
    [componentCls]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style2.resetComponent)(token)), (0, _style.genBasicInputStyle)(token)), {
      display: 'inline-flex',
      alignItems: 'stretch',
      width: controlWidth,
      margin: 0,
      padding: 0,
      borderRadius
    }), (0, _variants.genOutlinedStyle)(token, {
      [`${componentCls}-actions`]: {
        background: colorBgContainer,
        [`${componentCls}-action-down`]: {
          borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`
        }
      }
    })), (0, _variants.genFilledStyle)(token, {
      [`${componentCls}-actions`]: {
        background: '#f0f0f0',
        [`${componentCls}-action-down`]: {
          borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`
        }
      },
      '&:focus-within': {
        [`${componentCls}-actions`]: {
          background: colorBgContainer
        }
      }
    })), (0, _variants.genUnderlinedStyle)(token, {
      [`${componentCls}-actions`]: {
        background: colorBgContainer,
        [`${componentCls}-action-down`]: {
          borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`
        }
      }
    })), (0, _variants.genBorderlessStyle)(token)), {
      '&-rtl': {
        direction: 'rtl',
        [`${componentCls}-input`]: {
          direction: 'rtl'
        }
      },
      '&-lg': {
        padding: 0,
        fontSize: fontSizeLG,
        lineHeight: token.lineHeightLG,
        borderRadius: borderRadiusLG,
        [`input${componentCls}-input`]: {
          height: controlHeightLG - 2 * lineWidth
        }
      },
      '&-sm': {
        padding: 0,
        borderRadius: borderRadiusSM,
        [`input${componentCls}-input`]: {
          height: controlHeightSM - 2 * lineWidth,
          padding: `0 ${inputPaddingHorizontalSM}px`
        }
      },
      // ===================== Out Of Range =====================
      '&-out-of-range': {
        input: {
          color: colorError
        }
      },
      // Style for input-group: input with label, with button or dropdown...
      '&-group': (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style2.resetComponent)(token)), (0, _style.genInputGroupStyle)(token)), {
        // '&-disabled, &[disabled]': {
        //   ...genDisabledStyle(token),
        // },
        // ...genDisabledStyle(token)
        '&-wrapper': (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
          display: 'inline-block',
          textAlign: 'start',
          verticalAlign: 'top',
          [`${componentCls}-affix-wrapper`]: {
            width: '100%'
          },
          // Size
          '&-lg': {
            [`${componentCls}-group-addon`]: {
              borderRadius: borderRadiusLG,
              fontSize: fontSizeLG
            }
          },
          '&-sm': {
            [`${componentCls}-group-addon`]: {
              borderRadius: borderRadiusSM
            }
          }
        }, (0, _variants.genOutlinedGroupStyle)(token)), (0, _variants.genFilledGroupStyle)(token)), {
          // Fix the issue of using icons in Space Compact mode
          // https://github.com/ant-design/ant-design/issues/45764
          [`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]: {
            [`${componentCls}, ${componentCls}-group-addon`]: {
              borderRadius: 0
            }
          },
          [`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: {
            [`${componentCls}, ${componentCls}-group-addon`]: {
              borderStartEndRadius: 0,
              borderEndEndRadius: 0
            }
          },
          [`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: {
            [`${componentCls}, ${componentCls}-group-addon`]: {
              borderStartStartRadius: 0,
              borderEndStartRadius: 0
            }
          }
        })
      }),
      [componentCls]: {
        '&-input-wrap': {
          flex: 1
        },
        '&-input': (0, _extends2.default)((0, _extends2.default)({
          width: '100%',
          height: controlHeight - 2 * lineWidth,
          padding: `0 ${inputPaddingHorizontal}px`,
          textAlign: 'start',
          backgroundColor: 'transparent',
          border: 0,
          borderRadius,
          outline: 0,
          transition: `all ${motionDurationMid} linear`,
          appearance: 'textfield',
          color: token.colorText,
          fontSize: 'inherit',
          verticalAlign: 'top'
        }, (0, _style.genPlaceholderStyle)(token.colorTextPlaceholder)), {
          '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': {
            margin: 0,
            /* stylelint-disable-next-line property-no-vendor-prefix */
            webkitAppearance: 'none',
            appearance: 'none'
          }
        })
      }
    }),
    [`${componentCls}-disabled ${componentCls}-input`]: {
      cursor: 'not-allowed',
      color: token.colorTextDisabled
    }
  }, {
    [componentCls]: {
      [`${componentCls}-action-up-disabled,${componentCls}-action-down-disabled`]: {
        cursor: 'not-allowed'
      },
      [`${componentCls}-action`]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style2.resetIcon)()), {
        userSelect: 'none',
        overflow: 'hidden',
        fontWeight: 'bold',
        lineHeight: 0,
        textAlign: 'center',
        cursor: 'pointer',
        transition: `all ${motionDurationMid} linear`,
        '&:active': {
          background: token.colorFillAlter
        },
        '&:hover': {
          color: colorPrimary
        }
      }),
      '&-mode-input': {
        overflow: 'hidden',
        [`${componentCls}-actions`]: {
          position: 'absolute',
          insetBlockStart: 0,
          insetInlineEnd: 0,
          width: token.handleVisibleWidth,
          opacity: handleVisible === true ? 1 : 0,
          height: '100%',
          borderRadius: 0,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'stretch',
          transition: `all ${motionDurationMid}`,
          overflow: 'hidden',
          [`${componentCls}-action`]: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flex: 'auto',
            height: '40%',
            marginInlineEnd: 0,
            fontSize: token.handleFontSize
          }
        },
        [`&:hover ${componentCls}-actions, &-focused ${componentCls}-actions`]: {
          width: token.handleWidth,
          opacity: 1
        },
        [`${componentCls}-action`]: {
          color: token.colorIcon,
          height: '50%',
          borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
          // Hover
          '&:hover': {
            height: `60%`
          }
        },
        [`&${componentCls}-disabled, &${componentCls}-readonly`]: {
          [`${componentCls}-actions`]: {
            display: 'none'
          }
        }
      },
      [`&${componentCls}-mode-spinner`]: {
        padding: 0,
        width: 'auto',
        [`${componentCls}-action`]: {
          flex: 'none',
          paddingInline: '11px',
          '&-up': {
            borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`
          },
          '&-down': {
            borderInlineEnd: `${lineWidth}px ${lineType} ${colorBorder}`
          }
        },
        [`${componentCls}-input`]: {
          textAlign: 'center',
          paddingInline: '11px'
        }
      }
    }
  }];
};
const genAffixWrapperStyles = token => {
  const {
    componentCls,
    inputPaddingHorizontal,
    inputAffixPadding,
    controlWidth,
    borderRadiusLG,
    borderRadiusSM,
    handleWidth,
    motionDurationMid
  } = token;
  return {
    [`${componentCls}-affix-wrapper`]: (0, _extends2.default)((0, _extends2.default)({}, (0, _style.genBasicInputStyle)(token)), {
      // ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
      // or number handler will cover form status
      position: 'relative',
      display: 'inline-flex',
      width: controlWidth,
      padding: 0,
      paddingInlineStart: inputPaddingHorizontal,
      '&-disabled, &[disabled]': (0, _extends2.default)({}, (0, _variants.genDisabledStyle)(token)),
      '&-lg': {
        borderRadius: borderRadiusLG
      },
      '&-sm': {
        borderRadius: borderRadiusSM
      },
      [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: (0, _extends2.default)((0, _extends2.default)({}, (0, _variants.genHoverStyle)(token)), {
        zIndex: 1
      }),
      '&-focused, &:focus': {
        zIndex: 1
      },
      [`&-disabled > ${componentCls}-disabled`]: {
        background: 'transparent'
      },
      [`> div${componentCls}`]: {
        width: '100%',
        border: 'none',
        outline: 'none',
        [`&${componentCls}-focused`]: {
          boxShadow: 'none !important'
        }
      },
      [`input${componentCls}-input`]: {
        padding: 0
      },
      '&::before': {
        width: 0,
        visibility: 'hidden',
        content: '"\\a0"'
      },
      [`${componentCls}-handler-wrap`]: {
        zIndex: 2
      },
      [componentCls]: {
        '&-prefix, &-suffix': {
          display: 'flex',
          flex: 'none',
          alignItems: 'center',
          pointerEvents: 'none'
        },
        '&-prefix': {
          marginInlineEnd: inputAffixPadding
        },
        '&-suffix': {
          position: 'absolute',
          insetBlockStart: 0,
          insetInlineEnd: 0,
          zIndex: 1,
          height: '100%',
          marginInlineEnd: inputPaddingHorizontal,
          marginInlineStart: inputAffixPadding,
          transition: `margin ${motionDurationMid}`
        }
      },
      [`&:not(${componentCls}-affix-wrapper-without-controls):hover ${componentCls}-suffix`]: {
        marginInlineEnd: `${handleWidth + inputPaddingHorizontal}px`
      }
    })
  };
};
// ============================== Export ==============================
var _default = exports.default = (0, _internal.genComponentStyleHook)('InputNumber', token => {
  const inputNumberToken = (0, _token.initInputToken)(token);
  return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken),
  // =====================================================
  // ==             Space Compact                       ==
  // =====================================================
  (0, _compactItem.genCompactItemStyle)(inputNumberToken)];
}, token => {
  var _a, _b;
  const handleVisible = (_b = (_a = token.InputNumber) === null || _a === void 0 ? void 0 : _a.handleVisible) !== null && _b !== void 0 ? _b : 'auto';
  const handleWidth = token.controlHeightSM - token.lineWidth * 2;
  return {
    controlWidth: 90,
    handleWidth,
    handleFontSize: token.fontSize / 2,
    handleVisible: 'auto',
    handleVisibleWidth: handleVisible === true ? handleWidth : 0
  };
});