import { useState } from 'react';
import { Button, Card, CardContent, Flex, Link, Popover, Text, Tooltip, useElement } from '@pega/cosmos-react-core';
import { PlaceAndContainMock } from './Popover.mocks';
export default {
    title: 'Core/Popover',
    component: Popover,
    args: {
        arrow: false,
        showDelay: 'none',
        hideDelay: 'none',
        placement: 'bottom'
    },
    argTypes: {
        arrow: { control: { type: 'boolean' } },
        showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
        hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
        placement: {
            options: [
                'bottom',
                'bottom-start',
                'bottom-end',
                'top',
                'top-start',
                'top-end',
                'left',
                'left-start',
                'left-end',
                'right',
                'right-start',
                'right-end',
                'auto',
                'auto-start',
                'auto-end'
            ],
            control: { type: 'select' }
        }
    }
};
export const PopoverDemo = (args) => {
    const [mountHoverPopover, setMountHoverPopover] = useState(false);
    const setHoverPopoverEl = useElement()[1];
    const [textEl, setTextEl] = useElement();
    const [mountClickPopover, setMountClickPopover] = useState(false);
    const setClickPopoverEl = useElement()[1];
    const [buttonEl, setButtonEl] = useElement();
    const toggleHoverPopover = ({ type, key }) => {
        if (type === 'keydown') {
            if (key === 'Escape')
                setMountHoverPopover(false);
            return;
        }
        setMountHoverPopover(type === 'mouseover' || type === 'focus');
    };
    const hoverMountingHandlers = {
        onMouseOver: toggleHoverPopover,
        onMouseOut: toggleHoverPopover,
        onKeyDown: toggleHoverPopover,
        onFocus: toggleHoverPopover,
        onBlur: toggleHoverPopover
    };
    const toggleClickPopover = ({ type, key }) => {
        if (type === 'keydown') {
            if (key === 'Escape')
                setMountClickPopover(false);
            return;
        }
        setMountClickPopover(type === 'click' || type === 'focus');
    };
    const clickMountingHandlers = {
        onClick: toggleClickPopover,
        onKeyDown: toggleClickPopover,
        onFocus: toggleClickPopover,
        onBlur: toggleClickPopover
    };
    return (<Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>
      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>
        Hover Over Me
      </Text>
      <Popover ref={setHoverPopoverEl} show={mountHoverPopover} target={textEl} portal arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...hoverMountingHandlers}>
        <Card>
          <CardContent>
            <Text>This Popover appears on hover!</Text>
          </CardContent>
        </Card>
      </Popover>
      <Button ref={setButtonEl} {...clickMountingHandlers}>
        Click Me
      </Button>
      <Popover ref={setClickPopoverEl} show={mountClickPopover} target={buttonEl} portal arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...clickMountingHandlers}>
        <Card>
          <CardContent>
            <Text>This Popover appears on click!</Text>
          </CardContent>
        </Card>
      </Popover>
    </Flex>);
};
export const PopoverGroups = () => {
    const [firstTooltipButton, setFirstTooltipButton] = useElement();
    const [secondTooltipButton, setSecondTooltipButton] = useElement();
    const [thirdTooltipButton, setThirdTooltipButton] = useElement();
    const [firstPopoverButton, setFirstPopoverButton] = useElement();
    const [secondPopoverButton, setSecondPopoverButton] = useElement();
    const [thirdPopoverButton, setThirdPopoverButton] = useElement();
    const [showFirstPopover, setShowFirstPopover] = useState(false);
    const [showSecondPopover, setShowSecondPopover] = useState(false);
    const [showThirdPopover, setShowThirdPopover] = useState(false);
    return (<Flex container={{ direction: 'column', gap: 4 }}>
      <Text variant='h2'>groupId: tooltip</Text>
      <div>
        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>
          Hover me
        </Button>
        <Tooltip target={firstTooltipButton} id='first-tooltip'>
          This is a tooltip for the first button.
        </Tooltip>
        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>
          Hover me
        </Button>
        <Tooltip target={secondTooltipButton} id='second-tooltip'>
          This is a tooltip for the second button.
        </Tooltip>
        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>
          Hover me
        </Button>
        <Tooltip target={thirdTooltipButton} id='third-tooltip'>
          This is a tooltip for the third button.
        </Tooltip>
        <Link href='http://www.google.com' previewable>
          Previewable Link
        </Link>
        <Link href='http://www.google.com' previewable>
          Previewable Link
        </Link>
        <Link href='http://www.google.com' previewable>
          Previewable Link
        </Link>
      </div>
      <Text variant='h2'>No groupId</Text>
      <div>
        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>
          Click me
        </Button>
        <Popover show={showFirstPopover} target={firstPopoverButton}>
          <Card>
            <CardContent>
              <Text>Popover #1</Text>
            </CardContent>
          </Card>
        </Popover>
        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>
          Click me
        </Button>
        <Popover show={showSecondPopover} target={secondPopoverButton}>
          <Card>
            <CardContent>
              <Text>Popover #2</Text>
            </CardContent>
          </Card>
        </Popover>
        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>
          Click me
        </Button>
        <Popover show={showThirdPopover} target={thirdPopoverButton}>
          <Card>
            <CardContent>
              <Text>Popover #3</Text>
            </CardContent>
          </Card>
        </Popover>
      </div>
    </Flex>);
};
PopoverGroups.argTypes = {
    arrow: { table: { disable: true } },
    showDelay: { table: { disable: true } },
    hideDelay: { table: { disable: true } },
    placement: { table: { disable: true } }
};
export const PlaceAndContain = (args) => {
    return (<PlaceAndContainMock {...args} arrow={args.arrow} primaryPlacement={args.primaryPlacement} secondaryPlacement={args.secondaryPlacement} contentSize={args.contentSize}/>);
};
PlaceAndContain.args = {
    arrow: false,
    primaryPlacement: 'bottom',
    secondaryPlacement: 'none',
    contentSize: 15
};
PlaceAndContain.argTypes = {
    arrow: { control: { type: 'boolean' } },
    primaryPlacement: {
        control: { type: 'select' },
        options: ['bottom', 'top', 'left', 'right', 'none']
    },
    secondaryPlacement: {
        control: { type: 'select' },
        options: ['none', 'start', 'end']
    },
    contentSize: {
        control: { type: 'range', min: 1, max: 30, step: 1 }
    },
    placement: { table: { disable: true } },
    showDelay: { table: { disable: true } },
    hideDelay: { table: { disable: true } }
};
//# sourceMappingURL=Popover.stories.jsx.map