import { useState } from 'react';
import { CompositeInput } from '@pega/cosmos-react-core';
import { FormRenderer } from './CompositeInput.mocks';
export default {
    title: 'Core/CompositeInput',
    component: CompositeInput
};
export const CompositeInputDemo = (args) => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [value, setValue] = useState('');
    return (<CompositeInput {...args} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} placeholder={args.placeholder} value={value} additionalInfo={args.showAdditionalInfo ? { content: 'Please enter your full name.' } : undefined} dialog={{
            renderer: FormRenderer,
            rendererProps: {
                firstName,
                onFirstNameChange: setFirstName,
                lastName,
                onLastNameChange: setLastName
            },
            onApply: ({ close }) => {
                setValue([firstName, lastName].join(' '));
                close();
            },
            onCancel: ({ close }) => {
                const [first, last] = value.split(' ');
                setFirstName(first);
                setLastName(last);
                close();
            }
        }} onClear={() => setValue('')}/>);
};
CompositeInputDemo.args = {
    label: 'Full name',
    labelHidden: false,
    info: 'Put your full name',
    status: undefined,
    required: false,
    disabled: false,
    placeholder: '',
    showAdditionalInfo: false
};
CompositeInputDemo.argTypes = {
    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' } },
    placeholder: { control: { type: 'text' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
//# sourceMappingURL=CompositeInput.stories.jsx.map