import { a as __rest, _ as __assign } from '../tslib.es6-20a2a300.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useRef, useState } from 'react';
import IconButton from './IconButton.js';
import InputAdornment from './InputAdornment.js';
import TextField from './TextField.js';
import { m as makeStyles } from '../makeStyles-c9a99c7a.js';
import { B as Box } from '../Box-581dc061.js';
import './Icon.js';
import '../icons/ArrowRight.js';
import '../icons/ArrowRightCircle.js';
import '../icons/Check.js';
import '../icons/CheckCircle.js';
import '../icons/ChevronRight.js';
import '../icons/CrossCircle.js';
import '../icons/DollarSign.js';
import '../icons/InfoCircle.js';
import '../icons/Link.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/TriangleLeft.js';
import '../icons/Copy.js';
import '../icons/SortUp.js';
import '../icons/Cross.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../theme/colors.js';
import '../defaultTheme-49a26576.js';
import '../IconButton-7563dc0d.js';
import '../clsx.m-6243b874.js';
import '../withStyles-99aeb25b.js';
import '../hoist-non-react-statics.cjs-b718ab87.js';
import '../capitalize-5d3e9aac.js';
import '../ButtonBase-11d3cdb5.js';
import 'react-dom';
import '../useForkRef-4ff8cc89.js';
import '../useEventCallback-8817ed1c.js';
import '../deprecatedPropType-0232df1e.js';
import '../useIsFocusVisible-c048447c.js';
import '../TransitionGroupContext-2ba64e99.js';
import '../refType-5cc24a92.js';
import '../elementTypeAcceptingRef-7677eeee.js';
import '../FormControlContext-64eed5c2.js';
import '../Typography-649a8eff.js';
import './Input.js';
import '../Input-d5c36a50.js';
import '../formControlState-da4d15f8.js';
import './InputLabel.js';
import './Typography.js';
import '../_commonjsHelpers-57e89916.js';
import '../theme/fontSize.js';
import '../theme/fontWeight.js';
import '../theme/fontFamily.js';
import '../theme/lineHeight.js';
import '../createStyles-16423e9e.js';
import '../useFormControl-dc7cf5d6.js';
import './FormHelperText.js';
import '../FormControl-1f6cf8f3.js';
import '../styled-339d0187.js';

var useStepperStyles = makeStyles(function (theme) { return ({
    root: function (_a) {
        var inputColor = _a.inputColor;
        return ({
            display: "flex",
            flexDirection: "column",
            "& .MuiIconButton-root": {
                padding: theme.spacing(0.75, 2),
                backgroundColor: theme.palette.input[inputColor === "primary" ? "light" : "main"],
                "&:first-of-type": {
                    borderRadius: theme.borders.radius.primary + "px " + theme.borders.radius.primary + "px 0 0",
                    marginBottom: 3
                },
                "&:last-of-type": {
                    borderRadius: "0 0 " + theme.borders.radius.primary + "px " + theme.borders.radius.primary + "px"
                },
                "& .icon": {
                    height: 8
                }
            }
        });
    }
}); });
var Stepper = function (_a) {
    var inputColor = _a.inputColor, inputNode = _a.inputNode, keyPress = _a.keyPress;
    var classes = useStepperStyles({ inputColor: inputColor });
    var buttonProps = function (type) { return ({
        iconKey: "triangleUp",
        size: "xxs",
        rotate: type === "up" ? 0 : 180,
        color: (function () {
            if (keyPress === "ArrowUp" && type === "up")
                return "primary";
            if (keyPress === "ArrowDown" && type === "down")
                return "primary";
            return "secondary";
        })()
    }); };
    return (jsxs(Box, __assign({ className: classes.root }, { children: [jsx(IconButton, { iconProps: __assign({}, buttonProps("up")), onClick: function () { return inputNode === null || inputNode === void 0 ? void 0 : inputNode.stepUp(); } }, void 0), jsx(IconButton, { iconProps: __assign({}, buttonProps("down")), onClick: function () { return inputNode === null || inputNode === void 0 ? void 0 : inputNode.stepDown(); } }, void 0)] }), void 0));
};
var useTextFieldStyles = makeStyles(function (theme) { return ({
    root: {
        "& .MuiInputBase-root": {
            paddingRight: theme.spacing(1),
            paddingTop: theme.spacing(0.9375),
            paddingBottom: theme.spacing(0.9375)
        },
        "& .MuiInputAdornment-root": {
            display: "block",
            height: "auto"
        },
        "& .MuiInputBase-adornedEnd": {
            paddingRight: theme.spacing(1) + "px !important"
        }
    }
}); });
var NumericField = forwardRef(function (_a, ref) {
    var _b;
    var id = _a.id, label = _a.label, onChange = _a.onChange, inputProps = _a.inputProps, props = __rest(_a, ["id", "label", "onChange", "inputProps"]);
    var fieldRef = useRef(null);
    var classes = useTextFieldStyles();
    var _c = useState(null), keyPress = _c[0], setKeyPress = _c[1];
    return (jsx("div", __assign({ className: classes.root }, { children: jsx(TextField, __assign({ ref: fieldRef, id: id, label: label, type: "number", onChange: function (event) {
                if (onChange)
                    onChange(event);
            }, onKeyDown: function (event) { return setKeyPress(event.key); }, onKeyUp: function () { return setKeyPress(null); }, inputProps: __assign({ endAdornment: (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(Stepper, { inputColor: inputProps.color, inputNode: (_b = fieldRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("input"), keyPress: keyPress }, void 0) }), void 0)) }, inputProps) }, props), void 0) }), void 0));
});

export { NumericField as default };
