import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import MuiInputAdornment from '@mui/material/InputAdornment';
import Icon from '../components/Icon.js';
import NumericField from '../components/NumericField.js';
import { numericFieldArgTypes } from './utils/formControlStories.js';
import { getAdornmentIconProps } from './utils/adornmentStories.js';
import '@mui/material/styles';
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 '@mui/material/Box';
import '../components/TextField.js';
import '@mui/material/TextField';
import '../theme/colors.js';
import '../components/EndAdornment.js';
import '../components/Button.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../components/Input.js';
import '@mui/material/Input';
import '../components/IconButton.js';
import '@mui/material/IconButton';
import './utils/iconStories.js';

/**
 * Helpers
 */
var getDecimalLength = function (val) {
    if (Math.floor(val.valueOf()) === val.valueOf())
        return 0;
    var str = val.toString();
    if (str.includes(".") && str.includes("-")) {
        return str.split("-")[1] || 0;
    }
    else if (str.includes(".")) {
        return str.split(".")[1].length || 0;
    }
    return str.split("-")[1] || 0;
};
/**
 * Constants
 */
var HELPER_MESSAGES = {
    NON_NUMERIC: "Only numeric input is accepted",
    MIN_REQUIRED: "Minimum value is 0.1",
    EXCESSIVE_DECIMAL: "Value stepper is 0.1",
    DEFAULT: "Stake amount should be an at least 0.1 and non-numeric value."
};
var MIN_VALUE = 0.1;
/**
 * Stories
 */
var Template = function (args) {
    var startAdornmentIconProps = getAdornmentIconProps(args, "start");
    var id = args.id, label = args.label, helperText = args.helperText, error = args.error, disabled = args.disabled, fullWidth = args.fullWidth, size = args.size, color = args.color, placeholder = args.placeholder, actionButton = args.actionButton;
    return (jsx(NumericField, { id: id, label: label, disabled: disabled, fullWidth: fullWidth, helperText: helperText, placeholder: placeholder, size: size, color: color, error: error, actionButtonProps: actionButton ? { disabled: false, children: "Submit", onClick: function () { return console.log("clicked"); } } : undefined, InputProps: {
            size: size,
            startAdornment: startAdornmentIconProps ? (jsx(MuiInputAdornment, __assign({ position: "start" }, { children: jsx(Icon, __assign({}, startAdornmentIconProps), void 0) }), void 0)) : undefined
        } }, void 0));
};
/**
 * Stories
 */
var Default = Template.bind({});
var ValueHandling = function () {
    var _a = useState(MIN_VALUE), numericValue = _a[0], setNumericValue = _a[1];
    var _b = useState(false), isError = _b[0], setIsError = _b[1];
    var _c = useState(HELPER_MESSAGES.DEFAULT), helperText = _c[0], setHelperText = _c[1];
    var _d = useState(true), valueIsMin = _d[0], setValueIsMin = _d[1];
    var handleValueChange = function (val) {
        var numVal = Number(val);
        setNumericValue(numVal);
        if (Number(val) === 0) {
            setHelperText(HELPER_MESSAGES.MIN_REQUIRED);
            setIsError(true);
            return;
        }
        if (getDecimalLength(numVal) > 1) {
            setHelperText(HELPER_MESSAGES.EXCESSIVE_DECIMAL);
            setIsError(true);
            return;
        }
        setHelperText(HELPER_MESSAGES.DEFAULT);
        setIsError(false);
        if (numVal === MIN_VALUE) {
            setValueIsMin(true);
        }
        else {
            setValueIsMin(false);
        }
    };
    return (jsx(NumericField, { fullWidth: true, label: "Stake amount", error: isError, helperText: helperText, size: "sm", color: "secondary", onChange: function (e) { return handleValueChange(e.target.value); }, onKeyDown: function () {
            if (valueIsMin)
                setHelperText(HELPER_MESSAGES.MIN_REQUIRED);
        }, InputProps: {
            placeholder: "" + MIN_VALUE,
            size: "sm",
            inputProps: {
                min: MIN_VALUE,
                step: MIN_VALUE,
                value: numericValue,
                pattern: "^[0-9]*[.,]?[0-9]*$",
                minLength: 1,
                inputMode: "decimal",
                autoComplete: "off",
                autoCorrect: "off",
                spellCheck: false
            }
        }, stepperProps: {
            downButtonProps: {
                onClick: function () {
                    if (valueIsMin)
                        setHelperText(HELPER_MESSAGES.MIN_REQUIRED);
                }
            }
        } }, void 0));
};
var NumericField_stories = {
    title: "Form Controls/NumericField",
    component: NumericField,
    argTypes: numericFieldArgTypes
};

export { Default, ValueHandling, NumericField_stories as default };
