import { useReducer } from 'react';
import { action } from '@storybook/addon-actions';
import { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';
import { DemoFieldRenderer, demoGroupMeta, ExpensesFieldRenderer, expensesGroupMeta, fieldGroupReducer, InsuranceFieldRenderer, insuranceGroupMeta } from './FieldGroupList.mocks';
export default {
    title: 'Core/FieldGroupList',
    component: FieldGroupList,
    args: {
        allowAdd: true,
        allowDelete: true,
        itemLevelDelete: false,
        contextualLabel: 'record'
    },
    argTypes: {
        allowAdd: { control: { type: 'boolean' } },
        allowDelete: { control: { type: 'boolean' } },
        itemLevelDelete: { control: { type: 'boolean' } },
        contextualLabel: { control: { type: 'text' } }
    }
};
export const ExpensesDemo = (args) => {
    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), [
        {
            name: `${expensesGroupMeta.label} 1`,
            id: createUID(),
            headingTag: 'h3',
            children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
        }
    ]);
    return (<Form actions={<>
          <Button name='Cancel' variant='secondary' onClick={(e) => {
                action('Click')(`${e.currentTarget.name}:${e.type}`);
            }}>
            Cancel
          </Button>
          <Button name='Submit' type='submit' variant='primary'>
            Submit
          </Button>
        </>} onSubmit={(e) => {
            e.preventDefault();
            action('Submit')(`Form:${e.type}`);
        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
      <Text variant='h2'>Expense report</Text>
      <FieldGroupList items={args.itemLevelDelete
            ? state.map((item, i) => ({
                ...item,
                onDelete: args.allowDelete && i !== 0
                    ? id => {
                        dispatch({ action: 'delete', id });
                    }
                    : undefined
            }))
            : state} onAdd={args.allowAdd
            ? () => {
                dispatch({ action: 'add' });
            }
            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
            ? id => {
                dispatch({ action: 'delete', id });
            }
            : undefined} contextualLabel={args.contextualLabel}/>
    </Form>);
};
export const InsuranceDemo = (args) => {
    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), [
        {
            name: `${insuranceGroupMeta.label} 1`,
            id: createUID(),
            headingTag: 'h3',
            children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
        }
    ]);
    return (<Form actions={<>
          <Button name='Cancel' variant='secondary' onClick={(e) => {
                action('Click')(`${e.currentTarget.name}:${e.type}`);
            }}>
            Cancel
          </Button>
          <Button name='Submit' type='submit' variant='primary'>
            Submit
          </Button>
        </>} onSubmit={(e) => {
            e.preventDefault();
            action('Submit')(`Form:${e.type}`);
        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
      <Text variant='h1'>Insurance step 1</Text>
      <Text variant='h2'>Dependants</Text>
      <FieldGroupList items={args.itemLevelDelete
            ? state.map((item, i) => ({
                ...item,
                onDelete: args.allowDelete && i !== 0
                    ? id => {
                        dispatch({ action: 'delete', id });
                    }
                    : undefined
            }))
            : state} onAdd={args.allowAdd
            ? () => {
                dispatch({ action: 'add' });
            }
            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
            ? id => {
                dispatch({ action: 'delete', id });
            }
            : undefined} contextualLabel={args.contextualLabel}/>
    </Form>);
};
export const FieldGroupListDemo = (args) => {
    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [
        {
            name: `${demoGroupMeta.label} 1`,
            id: createUID(),
            headingTag: 'h3',
            children: demoGroupMeta.fields.map(DemoFieldRenderer)
        }
    ]);
    return (<FieldGroupList items={args.itemLevelDelete
            ? state.map((item, i) => ({
                ...item,
                onDelete: args.allowDelete && i !== 0
                    ? id => {
                        dispatch({ action: 'delete', id });
                    }
                    : undefined
            }))
            : state} onAdd={args.allowAdd
            ? () => {
                dispatch({ action: 'add' });
            }
            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
            ? id => {
                dispatch({ action: 'delete', id });
            }
            : undefined} contextualLabel={args.contextualLabel}/>);
};
//# sourceMappingURL=FieldGroupList.stories.jsx.map