import { useState } from 'react';
import { Button, Card, Drawer, Flex, Text, useTheme } from '@pega/cosmos-react-core';
import { StyledDrawerContent } from './Drawer.styles';
export default {
    title: 'Core/Drawer',
    component: Drawer,
    args: {
        placement: 'right',
        transitionSpeed: '0.25s'
    },
    argTypes: {
        placement: { options: ['top', 'right', 'bottom', 'left'], control: { type: 'select' } },
        transitionSpeed: { control: { type: 'text' } }
    }
};
export const ContainedDrawer = (args) => {
    const [open, setOpen] = useState(false);
    const theme = useTheme();
    const drawer = (<Drawer open={open} nullWhenClosed onOuterClick={() => {
            setOpen(false);
        }} position='absolute' size='100%' placement={args.placement} transitionSpeed={args.transitionSpeed}>
      <Flex as={StyledDrawerContent} container={{
            direction: 'column',
            justify: 'center',
            alignItems: 'center',
            gap: 2,
            pad: 4
        }}>
        <Text variant='h1'>This is a Drawer</Text>
        <Text>
          You can close this Drawer by clicking anywhere in the area outside of it, or by clicking
          the Button below.
        </Text>
        <Button onClick={() => setOpen(false)}>Close Drawer</Button>
      </Flex>
    </Drawer>);
    return (<Card style={{
            position: 'relative',
            overflow: 'hidden',
            height: '20rem',
            width: '100%',
            border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,
            backgroundColor: `${theme.base.colors.blue['extra-light']}`,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
      <Button variant='primary' onClick={() => setOpen(true)}>
        Open Drawer
      </Button>
      {drawer}
    </Card>);
};
export const ViewportDrawer = (args) => {
    const [open, setOpen] = useState(false);
    const theme = useTheme();
    const drawer = (<Drawer open={open} onOuterClick={() => {
            setOpen(false);
        }} position='fixed' size={args.size} placement={args.placement} transitionSpeed={args.transitionSpeed} shadow={args.shadow}>
      <Flex as={StyledDrawerContent} container={{
            direction: 'column',
            justify: 'center',
            alignItems: 'center',
            gap: 2,
            pad: 4
        }}>
        <Text variant='h1'>This is a Drawer</Text>
        <Text>
          You can close this Drawer by clicking anywhere in the area outside of it, or by clicking
          the Button below.
        </Text>
        <Button onClick={() => setOpen(false)}>Close Drawer</Button>
      </Flex>
    </Drawer>);
    return (<Card style={{
            position: 'relative',
            overflow: 'hidden',
            height: '20rem',
            width: '100%',
            border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,
            backgroundColor: `${theme.base.colors.blue['extra-light']}`,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
      <Button variant='primary' onClick={() => setOpen(true)}>
        Open Drawer
      </Button>
      {drawer}
    </Card>);
};
ViewportDrawer.args = {
    size: '30rem',
    shadow: false
};
ViewportDrawer.argTypes = {
    size: { control: { type: 'text' } },
    shadow: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Drawer.stories.jsx.map