import { useState } from 'react';
import { DateInput, FieldGroup, Grid, Input, Select, Option, TextArea } from '@pega/cosmos-react-core';
export default {
    title: 'Core/FieldGroup',
    component: FieldGroup
};
export const FieldGroupDemo = (args) => {
    const [firstGroupCollapsed, setFirstGroupCollapsed] = useState(false);
    const [secondGroupCollapsed, setSecondGroupCollapsed] = useState(false);
    return (<Grid container={{ rowGap: 2 }}>
      <FieldGroup name={args.firstGroupName} headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined} description={args.firstGroupDescription} collapsed={args.firstGroupCollapsible ? firstGroupCollapsed : undefined} onToggleCollapsed={args.firstGroupCollapsible
            ? () => {
                setFirstGroupCollapsed(state => !state);
            }
            : undefined} additionalInfo={args.showFirstAdditionalInfo
            ? {
                content: 'This is a field group'
            }
            : undefined} variant='form-group'>
        <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>
          <Input type='text' label='Text 1'/>
          <Select label='Select 1'>
            <Option value='A'>Option 1A</Option>
            <Option value='B'>Option 1B</Option>
          </Select>
          <DateInput label='Date 1'/>
          <Grid item={{ colStart: '1', colEnd: '-1' }}>
            <TextArea label='TextArea 1'/>
          </Grid>
          <Input required type='text' label='Required 1'/>
          <Input disabled type='text' label='Disabled 1'/>
        </Grid>
      </FieldGroup>

      <FieldGroup name={args.secondGroupName} headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined} description={args.secondGroupDescription} collapsed={args.secondGroupCollapsible ? secondGroupCollapsed : undefined} onToggleCollapsed={args.secondGroupCollapsible
            ? () => {
                setSecondGroupCollapsed(state => !state);
            }
            : undefined} additionalInfo={args.showSecondAdditionalInfo
            ? {
                content: 'This is another field group'
            }
            : undefined} variant='form-group'>
        <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>
          <Input type='text' label='Text 2'/>
          <Select label='Select 2'>
            <Option value='A'>Option 2A</Option>
            <Option value='B'>Option 2B</Option>
          </Select>
          <DateInput label='Date 2'/>
          <Grid item={{ colStart: '1', colEnd: '-1' }}>
            <TextArea label='TextArea 2'/>
          </Grid>
          <Input required type='text' label='Required 2'/>
          <Input disabled type='text' label='Disabled 2'/>
        </Grid>
      </FieldGroup>
    </Grid>);
};
FieldGroupDemo.args = {
    firstGroupName: 'Field group 1',
    firstGroupHeadingTag: undefined,
    showfirstGroupHeadingTag: true,
    firstGroupCollapsible: true,
    firstGroupDescription: '',
    showFirstAdditionalInfo: true,
    secondGroupName: 'Field group 2',
    secondGroupHeadingTag: undefined,
    showsecondGroupHeadingTag: true,
    secondGroupCollapsible: true,
    secondGroupDescription: '',
    showSecondAdditionalInfo: true
};
FieldGroupDemo.argTypes = {
    firstGroupName: { control: { type: 'text' } },
    firstGroupHeadingTag: {
        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        control: { type: 'select' }
    },
    showfirstGroupHeadingTag: { control: { type: 'boolean' } },
    firstGroupCollapsible: { control: { type: 'boolean' } },
    firstGroupDescription: { control: { type: 'text' } },
    showFirstAdditionalInfo: { control: { type: 'boolean' } },
    secondGroupName: { control: { type: 'text' } },
    secondGroupHeadingTag: {
        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        control: { type: 'select' }
    },
    showsecondGroupHeadingTag: { control: { type: 'boolean' } },
    secondGroupCollapsible: { control: { type: 'boolean' } },
    secondGroupDescription: { control: { type: 'text' } },
    showSecondAdditionalInfo: { control: { type: 'boolean' } }
};
//# sourceMappingURL=FieldGroup.stories.jsx.map