import { useState } from 'react';
import { PhoneDisplay, PhoneInput } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Phone',
    component: PhoneInput
};
export const PhoneInputDemo = (args) => {
    const [phoneNumber, setPhoneNumber] = useState('');
    return (<PhoneInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} value={phoneNumber} onChange={setPhoneNumber} showCountryCode={args.showCountryCode} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
};
PhoneInputDemo.args = {
    showCountryCode: true,
    label: 'Phone input',
    labelHidden: false,
    info: 'Enter a phone number',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
PhoneInputDemo.argTypes = {
    showCountryCode: { control: { type: 'boolean' } },
    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 PhoneDisplayDemo = (args) => {
    return (<PhoneDisplay value={args.value} displayText={args.displayText} variant={args.variant} formattingOptions={{ showCountryCode: args.showCountryCode }}/>);
};
PhoneDisplayDemo.args = {
    value: '+12345678900',
    displayText: 'Example Phone',
    variant: 'link',
    showCountryCode: true
};
PhoneDisplayDemo.argTypes = {
    value: { control: { type: 'text' } },
    displayText: { control: { type: 'text' } },
    variant: { options: ['link', 'text'], control: { type: 'select' } },
    showCountryCode: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Phone.stories.jsx.map