import { useState } from 'react';
import { Button, Flex } from '@pega/cosmos-react-core';
import { Confirmation, DetailsList, Details } from '@pega/cosmos-react-work';
import { mockData } from '../../core/FieldValueList/FieldValueList.mocks';
import { TasksDemo } from '../Tasks/Tasks.stories';
import { StyledFlex } from './Confirmation.styles';
export default {
    title: 'Work/Confirmation',
    component: Confirmation
};
export const ConfirmationDemo = (args) => {
    const [showConfirmation, setShowConfirmation] = useState(true);
    const details = (<Details name={args.detailsName} columns={{
            a: <DetailsList items={mockData}/>
        }}/>);
    return (<Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>
      {showConfirmation && (<Confirmation title={args.title} details={args.showDetails ? details : undefined} whatsNext={args.showWhatsNext
                ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
                : undefined} tasks={args.showTasks ? (<TasksDemo showVisual={false} showViewSelector={false} count={3} openableTasks={false}/>) : undefined} onClose={() => setShowConfirmation(false)}/>)}
      {!showConfirmation && (<Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>)}
    </Flex>);
};
ConfirmationDemo.args = {
    title: 'US-1337 confirmation',
    showDetails: true,
    detailsName: 'Case summary',
    showWhatsNext: true,
    showTasks: true
};
ConfirmationDemo.argTypes = {
    title: { control: { type: 'text' } },
    showDetails: { control: { type: 'boolean' } },
    detailsName: { control: { type: 'text' } },
    showWhatsNext: { control: { type: 'boolean' } },
    showTasks: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Confirmation.stories.jsx.map