import { useState } from 'react';
import { Button, ExpandCollapse, Flex, Text } from '@pega/cosmos-react-core';
import { StyledRegion } from './ExpandCollapse.styles';
export default {
    title: 'Core/ExpandCollapse',
    component: ExpandCollapse,
    args: {
        min: '',
        max: '',
        transitionSpeed: '0.25s'
    },
    argTypes: {
        min: { control: { type: 'text' } },
        max: { control: { type: 'text' } },
        transitionSpeed: { control: { type: 'text' } }
    }
};
export const VerticalExpandCollapse = (args) => {
    const [collapsed, setCollapsed] = useState(true);
    return (<Flex container={{ direction: 'column' }}>
      <StyledRegion>
        <Button onClick={() => setCollapsed(curState => !curState)}>
          {collapsed ? 'Expand' : 'Collapse '}
        </Button>
      </StyledRegion>

      <ExpandCollapse dimension='height' collapsed={collapsed} min={args.min} max={args.max} transitionSpeed={args.transitionSpeed} nullWhenCollapsed>
        <StyledRegion innerRegion>
          <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
          </Text>
        </StyledRegion>
      </ExpandCollapse>

      <StyledRegion>
        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>
      </StyledRegion>
    </Flex>);
};
export const HorizontalExpandCollapse = (args) => {
    const [collapsed, setCollapsed] = useState(true);
    const [showText, setShowText] = useState(false);
    return (<Flex container>
      <StyledRegion>
        <Button onClick={() => setCollapsed(curState => !curState)}>
          {collapsed ? 'Expand' : 'Collapse '}
        </Button>
      </StyledRegion>

      <ExpandCollapse dimension='width' collapsed={collapsed} min={args.min} max={args.max} transitionSpeed={args.transitionSpeed} nullWhenCollapsed onAfterExpand={() => setShowText(true)} onBeforeCollapse={() => setShowText(false)}>
        <StyledRegion innerRegion>
          {showText && (<Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
            </Text>)}
        </StyledRegion>
      </ExpandCollapse>

      <StyledRegion>
        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>
      </StyledRegion>
    </Flex>);
};
//# sourceMappingURL=ExpandCollapse.stories.jsx.map