import { useState } from 'react';
import { Banner, Button, ThemeOverride, Flex, Form, FormField, Input } from '@pega/cosmos-react-core';
import { FormContent, ReadOnlyFormContent } from './Form.mocks';
export default {
    title: 'Core/Form',
    component: Form,
    subcomponents: {
        FormField
    },
    excludeStories: ['ConfigurableForm'],
    args: {
        heading: 'Form demo',
        description: ''
    },
    argTypes: {
        heading: { control: { type: 'text' } },
        description: { control: { type: 'text' } }
    }
};
export const ReadOnlyOneColumnForm = (args) => {
    return (<ReadOnlyFormContent cols={1} heading={args.heading} description={args.description} showActions/>);
};
export const OneColumnForm = (args) => {
    return <FormContent cols={1} heading={args.heading} description={args.description} showActions/>;
};
export const TwoColumnForm = (args) => {
    return <FormContent cols={2} heading={args.heading} description={args.description} showActions/>;
};
export const ThreeColumnForm = (args) => {
    return <FormContent cols={3} heading={args.heading} description={args.description} showActions/>;
};
export const SimpleFormDemo = (args) => {
    const [inputValue, setInputValue] = useState('');
    const [success, setSuccess] = useState('');
    const actions = (<>
      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>
        Cancel
      </Button>
      <Button name='Submit' type='submit' variant='primary'>
        Submit
      </Button>
    </>);
    const successBanner = (<Banner variant='success' messages={['Form submitted', `Input value: ${success}`]}/>);
    const errorBanner = (<Banner variant='urgent' messages={['All required fields in the form must be completed.']}/>);
    const banner = success ? successBanner : errorBanner;
    return (<Form banners={args.withBanners ? banner : undefined} actions={actions} heading={args.heading} description={args.description} onSubmit={(e) => {
            e.preventDefault();
            setSuccess(inputValue);
            setInputValue('');
        }}>
      <Flex container={{ direction: 'column', itemGap: 2 }}>
        <Input label='Name' info='Enter your first name' required value={inputValue} onChange={(e) => {
            setSuccess('');
            setInputValue(e.target.value);
        }}/>
      </Flex>
    </Form>);
};
SimpleFormDemo.args = {
    withBanners: false
};
SimpleFormDemo.argTypes = {
    withBanners: { control: { type: 'boolean' } }
};
export const ConfigurableForm = (args) => {
    return (<ThemeOverride theme={{
            components: {
                'form-control': {
                    'foreground-color': args.foregroundColor,
                    'background-color': args.backgroundColor,
                    'border-color': args.borderColor,
                    'border-width': args.borderWidth,
                    'border-radius': args.borderRadius,
                    ':hover': {
                        'border-color': args.hoverBorderColor
                    },
                    ':focus': {
                        'border-color': args.focusBorderColor
                    }
                }
            }
        }}>
      <FormContent cols={2} showActions/>
    </ThemeOverride>);
};
ConfigurableForm.args = {
    foregroundColor: '#054a8a',
    backgroundColor: '#e2f1ff',
    borderColor: '#939393',
    borderWidth: '0.0625rem',
    borderRadius: 0.5,
    hoverBorderColor: '#3f3f3f',
    focusBorderColor: 'transparent'
};
ConfigurableForm.argTypes = {
    foregroundColor: { control: { type: 'color' } },
    backgroundColor: { control: { type: 'color' } },
    borderColor: { control: { type: 'color' } },
    borderWidth: { control: { type: 'text' } },
    borderRadius: { control: { type: 'number' } },
    hoverBorderColor: { control: { type: 'color' } },
    focusBorderColor: { control: { type: 'color' } },
    heading: { table: { disable: true } },
    description: { table: { disable: true } }
};
//# sourceMappingURL=Form.stories.jsx.map