import { useEffect, useState } from 'react';
import { CurrencyDisplay, CurrencyInput, usePrevious } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Currency',
    component: CurrencyInput
};
export const CurrencyInputDemo = (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 (<CurrencyInput {...args} value={value} onChange={inputValue => {
            setValue(inputValue);
            args.onChange?.(inputValue);
        }} onBlur={inputValue => {
            args.onBlur?.(inputValue);
        }} onFocus={inputValue => {
            args.onFocus?.(inputValue);
        }} currencyISOCode={args.currencyISOCode} alwaysShowISOCode={args.alwaysShowISOCode} showDecimal={args.showDecimal} maximumFractionDigits={args.maximumFractionDigits} showGroupSeparators={args.showGroupSeparators} step={args.step} 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 that will represent a monetary value.'
            }
            : undefined}/>);
};
CurrencyInputDemo.args = {
    value: undefined,
    currencyISOCode: 'USD',
    alwaysShowISOCode: false,
    showDecimal: true,
    maximumFractionDigits: 0,
    showGroupSeparators: true,
    step: 1,
    label: 'Currency input',
    labelHidden: false,
    info: 'Enter a numerical value',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
CurrencyInputDemo.argTypes = {
    value: { control: { type: 'number' } },
    currencyISOCode: {
        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
        control: { type: 'select' }
    },
    alwaysShowISOCode: { control: { type: 'boolean' } },
    showDecimal: { control: { type: 'boolean' } },
    maximumFractionDigits: { control: { type: 'number' } },
    showGroupSeparators: { control: { type: 'boolean' } },
    step: { control: { type: 'number' } },
    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 CurrencyDisplayDemo = (args) => {
    return (<CurrencyDisplay value={args.value} currencyISOCode={args.currencyISOCode} formattingOptions={{
            fractionDigits: args.fractionDigits,
            groupSeparators: args.groupSeparators,
            currency: args.currency,
            negative: args.negative,
            notation: args.notation
        }}/>);
};
CurrencyDisplayDemo.args = {
    value: undefined,
    currencyISOCode: 'USD',
    groupSeparators: true,
    fractionDigits: undefined,
    currency: 'symbol',
    negative: 'minus-sign',
    notation: 'standard'
};
CurrencyDisplayDemo.argTypes = {
    value: { control: { type: 'number' } },
    currencyISOCode: {
        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
        control: { type: 'select' }
    },
    groupSeparators: { control: { type: 'boolean' } },
    fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
    negative: {
        control: {
            type: 'inline-radio'
        },
        options: ['minus-sign', 'parentheses']
    },
    currency: {
        control: { type: 'select' },
        options: ['symbol', 'code', 'name']
    },
    notation: {
        control: { type: 'inline-radio' },
        options: ['standard', 'compact']
    }
};
//# sourceMappingURL=Currency.stories.jsx.map