import { useEffect, useRef, useState } from 'react';
import { ThemeOverride, Input } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Input',
    component: Input,
    excludeStories: ['ConfigurableInput']
};
export const InputDemo = (args) => {
    return (<Input additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} id='input-demo' type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
            ? [
                {
                    id: 'config',
                    text: 'Configure',
                    icon: 'gear'
                }
            ]
            : undefined}/>);
};
InputDemo.args = {
    type: 'text',
    showAction: false,
    showAdditionalInfo: false,
    label: 'Input',
    labelHidden: false,
    info: 'Enter some value',
    placeholder: 'Enter your input',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false
};
InputDemo.argTypes = {
    type: {
        options: ['text', 'password', 'email', 'url'],
        control: { type: 'select' }
    },
    showAdditionalInfo: { control: { type: 'boolean' } },
    showAction: { 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', 'pending'],
        control: { type: 'select' }
    },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } }
};
export const ConfigurableInput = (args) => {
    return (<ThemeOverride theme={{
            components: {
                input: {
                    height: args.height,
                    padding: args.padding
                },
                'form-field': {
                    error: {
                        'status-color': args.errorStatusColor
                    },
                    success: {
                        'status-color': args.successStatusColor
                    },
                    warning: {
                        'status-color': args.warningStatusColor
                    }
                }
            }
        }}>
      <Input status={args.status} label='Input' placeholder='Enter your input' info='Enter some value'/>
    </ThemeOverride>);
};
ConfigurableInput.args = {
    height: '2rem',
    padding: '0.5rem',
    errorStatusColor: '#d91c29',
    successStatusColor: '#20aa50',
    warningStatusColor: '#fd6000',
    status: undefined
};
ConfigurableInput.argTypes = {
    height: { control: { type: 'text' } },
    padding: { control: { type: 'text' } },
    errorStatusColor: { control: { type: 'color' } },
    successStatusColor: { control: { type: 'color' } },
    warningStatusColor: { control: { type: 'color' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
};
export const InputWithSuggestion = (args) => {
    const [status, setStatus] = useState(undefined);
    const [inputValue, setInputValue] = useState('');
    const timerRef = useRef();
    const timer = () => {
        window.clearTimeout(timerRef.current);
        timerRef.current = window.setTimeout(() => {
            setInputValue('AI suggestion value');
            setStatus('pending');
        }, 3000);
    };
    useEffect(() => {
        timer();
        return () => {
            window.clearTimeout(timerRef.current);
        };
    }, []);
    return (<Input id='input-demo' value={inputValue} type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
            ? [
                {
                    id: 'config',
                    text: 'Configure',
                    icon: 'gear'
                }
            ]
            : undefined} onChange={(e) => {
            setInputValue(e.target.value);
            setStatus(undefined);
            timer();
        }} onResolveSuggestion={accepted => {
            if (accepted) {
                setStatus('success');
            }
            else {
                setStatus(undefined);
                setInputValue('');
            }
            timer();
        }}/>);
};
InputWithSuggestion.args = {
    type: 'text',
    showAction: false,
    label: 'Input',
    labelHidden: false,
    info: 'Enter some value',
    placeholder: 'Enter your input',
    required: false,
    disabled: false,
    readOnly: false
};
InputWithSuggestion.argTypes = {
    type: {
        options: ['text', 'password', 'email', 'url'],
        control: { type: 'select' }
    },
    showAction: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    placeholder: { control: { type: 'text' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Input.stories.jsx.map