import { useState, useEffect } from 'react';
import { CreditCardDisplay, CreditCardInput, usePrevious } from '@pega/cosmos-react-core';
export default {
    title: 'Core/CreditCard'
};
export const CreditCardDisplayDemo = (args) => (<CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }}/>);
CreditCardDisplayDemo.args = {
    value: undefined,
    obfuscation: 'none'
};
CreditCardDisplayDemo.argTypes = {
    value: { control: { type: 'text' } },
    obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }
};
export const CreditCardInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<CreditCardInput {...args} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onChange={setValue} additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Input your 15-16 digit credit card number'
            }
            : undefined}/>);
};
CreditCardInputDemo.args = {
    value: undefined,
    label: 'Credit card number',
    labelHidden: false,
    info: 'Enter your credit card number',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
CreditCardInputDemo.argTypes = {
    value: { control: { type: 'text' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: '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' } }
};
//# sourceMappingURL=CreditCard.stories.jsx.map