import { useState } from 'react';
import { ThemeOverride, TextArea } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Textarea',
    component: TextArea,
    excludeStories: ['ConfigurableTextArea']
};
export const TextAreaDemo = (args) => {
    const [value, setValue] = useState('');
    return (<TextArea additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} id='text-area' value={value} onChange={(e) => setValue(e.target.value)} minLength={args.minLength} maxLength={args.maxLength} displayCharCount={args.displayCharCount} hardStop={args.hardStop} resizable={args.resizable} autoResize={args.autoResize} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
};
TextAreaDemo.args = {
    minLength: 0,
    maxLength: 300,
    displayCharCount: false,
    hardStop: true,
    resizable: false,
    autoResize: true,
    label: 'Text Area',
    labelHidden: false,
    info: 'Enter a large amount of text',
    placeholder: 'Tell us a story…',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
TextAreaDemo.argTypes = {
    minLength: { control: { type: 'number' } },
    maxLength: { control: { type: 'number' } },
    displayCharCount: { control: { type: 'boolean' } },
    hardStop: { control: { type: 'boolean' } },
    resizable: { control: { type: 'boolean' } },
    autoResize: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    placeholder: { 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' } }
};
export const ConfigurableTextArea = (args) => {
    const [value, setValue] = useState('');
    return (<ThemeOverride theme={{
            components: {
                'text-area': {
                    'min-height': args.minHeight,
                    padding: args.padding
                }
            }
        }}>
      <TextArea value={value} onChange={(e) => setValue(e.target.value)} resizable autoResize label='Configurable Text Area' info='Enter a large amount of text' placeholder='Tell us a story…'/>
    </ThemeOverride>);
};
ConfigurableTextArea.args = {
    minHeight: '3.75rem',
    padding: '0.5rem'
};
ConfigurableTextArea.argTypes = {
    minHeight: { control: { type: 'text' } },
    padding: { control: { type: 'text' } }
};
//# sourceMappingURL=TextArea.stories.jsx.map