import { useRef } from 'react';
import { slideAndFade } from '@atlaskit/top-layer/animations';
import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
import { Popover } from '@atlaskit/top-layer/popover';
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';

function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
    const triggerRef = useRef<HTMLButtonElement>(null);
    const popoverRef = useRef<HTMLDivElement>(null);
    const popoverId = usePopoverId();

    useAnchorPosition({
        anchorRef: triggerRef,
        popoverRef,
        placement: { axis: 'block', edge: 'end', align: 'start' },
    });

    return (
        <>
            <button
                ref={triggerRef}
                onClick={() => popoverRef.current?.togglePopover()}
                {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
            >
                Open
            </button>
            <Popover
                ref={popoverRef}
                id={popoverId}
                role="dialog"
                label="Settings"
                isOpen={isOpen}
                animate={slideAndFade()}
                onClose={onClose}
            >
                <PopoverSurface>Content here</PopoverSurface>
            </Popover>
        </>
    );
}

{
    isOpen && (
        <Dialog onClose={handleClose} width="medium">
            <Dialog.Content>
                <Dialog.Surface>
                    <Dialog.Header>
                        <Dialog.Title>Heading</Dialog.Title>
                        <Dialog.CloseButton />
                    </Dialog.Header>
                    <Dialog.Body>Content</Dialog.Body>
                    <Dialog.Footer>Actions</Dialog.Footer>
                </Dialog.Surface>
            </Dialog.Content>
        </Dialog>
    );
}

import {
    // Popover presets
    slideAndFade,
    fade,
    scaleAndFade,
    // Dialog presets
    dialogSlideUpAndFade,
    dialogFade,
} from '@atlaskit/top-layer/animations';

import { slideAndFade } from '@atlaskit/top-layer/animations';
import { Popover } from '@atlaskit/top-layer/popover';

const animation = slideAndFade();

<Popover animate={animation} role="dialog" label="My popover">
    Content
</Popover>;

import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';

const animation = dialogSlideUpAndFade();

<Dialog.Content animate={animation}>
    <Dialog.Surface>...</Dialog.Surface>
</Dialog.Content>;