"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberInput = void 0;
const react_1 = __importStar(require("react"));
const icons_1 = require("../../icons");
const Badge_1 = require("../Badge");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const hooks_1 = require("../../hooks");
const NumberInput = ({ value: valueProp, defaultValue: defaultValueProp = '', onChange: onChangeProp, min, max, prefix, suffix, icon, afterIcon, style, clearButton, error, disabled, onFocus, onBlur, placeholder, step = 1, integer = false, autoFocus, ...props }) => {
    const [value, setValue] = (0, hooks_1.useControllableState)({
        prop: valueProp,
        defaultProp: defaultValueProp,
        onChange: onChangeProp,
    });
    const [focused, setFocused] = (0, react_1.useState)(false);
    const handleIncre = (e) => {
        e.preventDefault();
        e.stopPropagation();
        //@ts-ignore its on purpose
        setValue(parseFloat(value + step));
    };
    const handleDecre = (e) => {
        e.preventDefault();
        e.stopPropagation();
        //@ts-ignore its on purpose
        setValue(parseFloat(value - step));
    };
    const handleThing = () => {
        if (integer && !Number.isInteger(value)) {
            setValue(Math.round(value));
        }
        if (value > max) {
            setValue(max);
        }
        if (value < min) {
            setValue(min);
        }
    };
    const handleBlur = () => {
        setFocused(false);
        handleThing();
    };
    (0, react_1.useEffect)(() => {
        if (focused)
            return;
        handleThing();
    }, [value]);
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            position: 'relative',
            minHeight: 40,
            width: '100%',
            padding: '0 12px',
            borderRadius: 8,
            display: 'flex',
            alignItems: 'center',
            backgroundColor: 'transparent',
            fontSize: '14px',
            lineHeight: '24px',
            boxSizing: 'border-box',
            color: (0, varsUtilities_1.color)('content', 'default', value === null ? 'secondary' : 'primary'),
            border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', error ? 'alert' : 'neutralNormal', 'default')}`,
            '&:hover': {
                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', error ? 'alert' : 'neutralHover', 'default')}`,
            },
            '&:focus-within': {
                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', error ? 'alert' : 'active', 'default')}`,
                boxShadow: error
                    ? `0 0 0 2px ${(0, varsUtilities_1.color)('inputBorder', 'alert', 'default')}`
                    : `0 0 0 2px ${(0, varsUtilities_1.color)('border', 'brand', 'subtle')}`,
            },
            '& > * + *': {
                marginLeft: '8px',
            },
            ...(disabled
                ? {
                    opacity: '50%',
                }
                : {}),
            ...style,
        } },
        icon && react_1.default.createElement(inlines_1.styled.div, { style: { flexShrink: 0 } }, icon),
        prefix && react_1.default.createElement(Badge_1.Badge, { ...prefix }),
        react_1.default.createElement(inlines_1.styled.input, { value: value, onChange: (e) => {
                if (!Number.isNaN(parseFloat(e.target.value))) {
                    setValue(parseFloat(e.target?.value));
                }
                else {
                    setValue('');
                }
            }, onFocus: (e) => {
                setFocused(true);
                onFocus?.(e.target.value);
            }, onBlur: (e) => {
                handleBlur();
                onBlur?.(e.target.value);
            }, step: step, min: min, max: max, style: {
                width: '100%',
                height: 38,
                appearance: 'none',
                background: 'transparent',
                fontSize: '14px',
                lineHeight: '24px',
                fontWeight: 400,
                border: 'none',
                padding: 0,
                color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
                '&::placeholder': {
                    color: (0, varsUtilities_1.color)('content', 'default', 'secondary'),
                },
                '&:focus': {
                    outline: 'none',
                },
            }, placeholder: placeholder, type: "number", autoFocus: autoFocus, ...props }),
        react_1.default.createElement(inlines_1.styled.div, { style: {
                position: 'absolute',
                right: 4,
                top: 0,
                bottom: 0,
                padding: 2,
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                display: 'flex',
            } },
            react_1.default.createElement(icons_1.IconSmallArrowheadTop, { onClick: handleIncre, style: {
                    padding: '8px 4px 0px',
                    marginBottom: '-4px',
                } }),
            react_1.default.createElement(icons_1.IconSmallArrowheadDown, { onClick: handleDecre, style: {
                    padding: '0px 4px 8px',
                    paddingTop: -4,
                    marginTop: '-4px',
                } })),
        suffix && react_1.default.createElement(Badge_1.Badge, { ...suffix }),
        (clearButton || afterIcon) && (react_1.default.createElement("div", { style: {
                flexShrink: 0,
                position: 'absolute',
                right: 30,
            } }, Math.abs(value) > 0 && clearButton ? (react_1.default.createElement(icons_1.IconClose, { onClick: () => {
                setValue('');
            } })) : (afterIcon)))));
};
exports.NumberInput = NumberInput;
//# sourceMappingURL=NumberInput.js.map