import { useEffect, useState } from 'react';
import { NumberDisplay, NumberInput, NumberRangeInput, usePrevious } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Number',
    component: NumberInput
};
export const NumberInputDemo = (args) => {
    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value === undefined ? undefined : `${args.value}`);
    }, [prev, args.value]);
    return (<NumberInput {...args} value={value} onChange={inputValue => {
            setValue(inputValue);
            args.onChange?.(inputValue);
        }} onBlur={inputValue => {
            args.onBlur?.(inputValue);
        }} onFocus={inputValue => {
            args.onFocus?.(inputValue);
        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Input a number'
            }
            : undefined}/>);
};
NumberInputDemo.args = {
    value: undefined,
    numberOfDecimals: 20,
    showDecimal: true,
    showGroupSeparators: true,
    step: 1,
    unit: undefined,
    label: 'Number input',
    labelHidden: false,
    info: 'Enter a numerical value',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
NumberInputDemo.argTypes = {
    value: { control: { type: 'number' } },
    numberOfDecimals: { control: { type: 'number' } },
    showDecimal: { control: { type: 'boolean' } },
    showGroupSeparators: { control: { type: 'boolean' } },
    step: { control: { type: 'number' } },
    unit: {
        options: [
            undefined,
            'acre',
            'byte',
            'celsius',
            'centimeter',
            'day',
            'degree',
            'fahrenheit',
            'foot',
            'gigabyte',
            'gram',
            'hectare',
            'hour',
            'inch',
            'kilobyte',
            'kilogram',
            'kilometer',
            'kilometer-per-hour',
            'liter',
            'liter-per-meter',
            'megabyte',
            'meter',
            'meter-per-second',
            'mile',
            'millimeter',
            'millisecond',
            'minute',
            'month',
            'percent',
            'pound',
            'second',
            'terabyte',
            'week',
            'year',
            'token'
        ],
        control: { type: 'select' }
    },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
export const NumberRangeInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prevValue = usePrevious(args.value);
    useEffect(() => {
        if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {
            setValue(args.value);
        }
    }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);
    return (<NumberRangeInput {...args} value={value} onChange={newValue => {
            setValue(newValue);
            args.onChange?.(newValue);
        }} onBlur={newValue => {
            setValue(newValue);
            args.onBlur?.(newValue);
        }} onFocus={newValue => {
            setValue(newValue);
            args.onFocus?.(newValue);
        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
};
NumberRangeInputDemo.args = {
    numberOfDecimals: 20,
    showDecimal: true,
    showGroupSeparators: true,
    step: 1,
    unit: undefined,
    fromLabel: 'Min value',
    toLabel: 'Max value',
    labelHidden: false,
    info: 'Enter a numerical value',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    label: 'Numeric value'
};
NumberRangeInputDemo.argTypes = {
    numberOfDecimals: { control: { type: 'number' } },
    showDecimal: { control: { type: 'boolean' } },
    showGroupSeparators: { control: { type: 'boolean' } },
    step: { control: { type: 'number' } },
    unit: {
        options: [
            undefined,
            'acre',
            'byte',
            'celsius',
            'centimeter',
            'day',
            'degree',
            'fahrenheit',
            'foot',
            'gigabyte',
            'gram',
            'hectare',
            'hour',
            'inch',
            'kilobyte',
            'kilogram',
            'kilometer',
            'kilometer-per-hour',
            'liter',
            'liter-per-meter',
            'megabyte',
            'meter',
            'meter-per-second',
            'mile',
            'millimeter',
            'millisecond',
            'minute',
            'month',
            'percent',
            'pound',
            'second',
            'terabyte',
            'week',
            'year',
            'token'
        ],
        control: { type: 'select' }
    },
    label: { control: { type: 'text' } },
    fromLabel: { control: { type: 'text' } },
    toLabel: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } }
};
export const StepperDemo = (args) => {
    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value === undefined ? undefined : `${args.value}`);
    }, [prev, args.value]);
    return (<NumberInput {...args} variant='stepper' value={value} onChange={inputValue => {
            setValue(inputValue);
            args.onChange?.(inputValue);
        }} onBlur={inputValue => {
            args.onBlur?.(inputValue);
        }} onFocus={inputValue => {
            args.onFocus?.(inputValue);
        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Input a stepper value'
            }
            : undefined}/>);
};
StepperDemo.args = {
    value: undefined,
    numberOfDecimals: 20,
    showDecimal: true,
    showGroupSeparators: true,
    step: 1,
    unit: undefined,
    label: 'Stepper input',
    labelHidden: false,
    info: 'Enter a numerical value',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
StepperDemo.argTypes = {
    value: { control: { type: 'number' } },
    numberOfDecimals: { control: { type: 'number' } },
    showDecimal: { control: { type: 'boolean' } },
    showGroupSeparators: { control: { type: 'boolean' } },
    step: { control: { type: 'number' } },
    unit: { control: { type: 'text' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
export const NumberDisplayDemo = (args) => {
    return (<NumberDisplay value={args.value} unit={args.unit} formattingOptions={{
            fractionDigits: args.fractionDigits,
            groupSeparators: args.groupSeparators,
            notation: args.notation
        }}/>);
};
NumberDisplayDemo.args = {
    value: undefined,
    unit: undefined,
    fractionDigits: undefined,
    notation: 'standard',
    groupSeparators: true
};
NumberDisplayDemo.argTypes = {
    value: { control: { type: 'number' } },
    unit: {
        options: [
            undefined,
            'acre',
            'byte',
            'celsius',
            'centimeter',
            'day',
            'degree',
            'fahrenheit',
            'foot',
            'gigabyte',
            'gram',
            'hectare',
            'hour',
            'inch',
            'kilobyte',
            'kilogram',
            'kilometer',
            'kilometer-per-hour',
            'liter',
            'liter-per-meter',
            'megabyte',
            'meter',
            'meter-per-second',
            'mile',
            'millimeter',
            'millisecond',
            'minute',
            'month',
            'percent',
            'pound',
            'second',
            'terabyte',
            'week',
            'year',
            'token'
        ],
        control: { type: 'select' }
    },
    fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
    groupSeparators: { control: { type: 'boolean' } },
    notation: {
        control: { type: 'inline-radio' },
        options: ['standard', 'compact']
    }
};
//# sourceMappingURL=Number.stories.jsx.map