import { _ as __assign, a as __rest } from '../tslib.es6-faad35dc.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
import { styled } from '@mui/material/styles';
import MuiBox from '@mui/material/Box';
import TextField from './TextField.js';
import IconButton from './IconButton.js';
import '@mui/material/TextField';
import '../theme/colors.js';
import './EndAdornment.js';
import '@mui/material/InputAdornment';
import './Icon.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import './Button.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import './Input.js';
import '@mui/material/Input';
import '@mui/material/IconButton';

/**
 * Constants
 */
var stepperSizeMap = {
    xs: "sm",
    sm: "sm",
    md: "sm",
    lg: "md"
};
var stepperPaddingMap = {
    xs: 4,
    sm: 4,
    md: 8,
    lg: 8
};
/**
 * Styles
 */
var StepperBox = styled(MuiBox)(function (_a) {
    var _b;
    var _c = _a.$data, inputSize = _c.inputSize, disabled = _c.disabled, theme = _a.theme;
    return ({
        display: "flex",
        gap: 0,
        pointerEvents: disabled ? "none" : "initial",
        "& .MuiIconButton-root": (_b = {
                padding: "0 " + stepperPaddingMap[inputSize] + "px",
                boxSizing: "content-box",
                "& + .MuiButtonBase-root": {
                    marginLeft: theme.spacing(0.5)
                }
            },
            _b[theme.breakpoints.down("sm")] = {
                "& + .MuiButtonBase-root": {
                    marginLeft: theme.spacing(1)
                }
            },
            _b)
    });
});
/**
 * Helpers
 */
var getButtonProps = function (type, inputSize, keyPress) {
    if (inputSize === void 0) { inputSize = "xs"; }
    return ({
        iconKey: type === "up" ? "plus" : "minus",
        size: stepperSizeMap[inputSize],
        color: (function () {
            if (keyPress === "ArrowUp" && type === "up")
                return "primary";
            if (keyPress === "ArrowDown" && type === "down")
                return "primary";
            return "secondary";
        })()
    });
};
/**
 * Components
 */
var Stepper = function (_a) {
    var _b = _a.inputSize, inputSize = _b === void 0 ? "xs" : _b, _c = _a.inputColor, inputColor = _c === void 0 ? "primary" : _c, inputNode = _a.inputNode, keyPress = _a.keyPress, disabled = _a.disabled, upButtonProps = _a.upButtonProps, downButtonProps = _a.downButtonProps;
    return (jsxs(StepperBox, __assign({ "$data": {
            inputSize: inputSize,
            inputColor: inputColor,
            disabled: disabled
        } }, { children: [jsx(IconButton, __assign({}, downButtonProps, { iconProps: __assign({}, getButtonProps("down", inputSize, keyPress)), onClick: function (e) {
                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.stepDown();
                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.dispatchEvent(new Event("input", { bubbles: true }));
                    if (downButtonProps === null || downButtonProps === void 0 ? void 0 : downButtonProps.onClick)
                        downButtonProps.onClick(e);
                } }), void 0), jsx(IconButton, __assign({}, upButtonProps, { iconProps: __assign({}, getButtonProps("up", inputSize, keyPress)), onClick: function (e) {
                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.stepUp();
                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.dispatchEvent(new Event("input", { bubbles: true }));
                    if (upButtonProps === null || upButtonProps === void 0 ? void 0 : upButtonProps.onClick)
                        upButtonProps.onClick(e);
                } }), void 0)] }), void 0));
};
/**
 * Main
 */
var NumericField = function (_a) {
    var onChange = _a.onChange, onKeyDown = _a.onKeyDown, InputProps = _a.InputProps, stepperProps = _a.stepperProps, actionButtonProps = _a.actionButtonProps, props = __rest(_a, ["onChange", "onKeyDown", "InputProps", "stepperProps", "actionButtonProps"]);
    var fieldRef = useRef(null);
    var _b = useState(null), keyPress = _b[0], setKeyPress = _b[1];
    var _c = useState(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current), fieldRefCurrent = _c[0], setFieldRefCurrent = _c[1];
    useEffect(function () {
        setFieldRefCurrent(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current);
    }, [fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current]);
    return (jsx(TextField, __assign({ ref: fieldRef, type: "number", onChange: function (event) {
            if (onChange)
                onChange(event);
        }, onKeyDown: function (event) {
            setKeyPress(event.key);
            if (onKeyDown)
                onKeyDown(event);
        }, onKeyUp: function () { return setKeyPress(null); }, actionButtonProps: actionButtonProps, InputProps: __assign({ size: props === null || props === void 0 ? void 0 : props.size, endAdornment: (jsx(Stepper, __assign({ keyPress: keyPress, inputSize: props === null || props === void 0 ? void 0 : props.size, inputColor: props === null || props === void 0 ? void 0 : props.color, disabled: props === null || props === void 0 ? void 0 : props.disabled, inputNode: fieldRefCurrent === null || fieldRefCurrent === void 0 ? void 0 : fieldRefCurrent.querySelector("input") }, stepperProps), void 0)) }, InputProps) }, props), void 0));
};

export { Stepper, NumericField as default };
