import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef } from 'react';
import { DeleteButton } from '@workday/canvas-kit-react/button';
import { useUniqueId } from '@workday/canvas-kit-react/common';
import { Box, Flex } from '@workday/canvas-kit-react/layout';
import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const headingStyles = createStyles({
    marginBlockStart: '0',
});
const cardStyles = createStyles({
    width: px2rem(320),
});
const flexStyles = createStyles({
    gap: system.gap.md,
    padding: system.padding.xs,
});
const bodyStyles = createStyles({
    marginBlock: '0',
});
const clipContainerStyles = createStyles({
    padding: system.padding.md,
    border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
    height: px2rem(200),
    position: 'relative',
    overflow: 'clip',
});
const visibleContainerStyles = createStyles({
    padding: system.padding.md,
    border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
    height: px2rem(200),
    position: 'relative',
    overflow: 'visible',
});
const scrollContainerStyles = createStyles({
    padding: system.padding.md,
    border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
    height: px2rem(200),
    position: 'relative',
    overflow: 'scroll',
});
const comparisonLayoutStyles = createStyles({
    display: 'grid',
    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
    gap: system.gap.lg,
    marginBlockEnd: system.gap.md,
});
function SingleInlinePopup({ overflowLabel, containerStyles, }) {
    const messageId = useUniqueId();
    const initialFocusRef = useRef(null);
    const model = usePopupModel({ initialFocusRef });
    useCloseOnOutsideClick(model);
    useCloseOnEscape(model);
    useInitialFocus(model);
    useReturnFocus(model);
    return (_jsxs(Box, { cs: containerStyles, children: [_jsx(Heading, { size: "small", as: "h4", cs: headingStyles, children: overflowLabel }), _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx(Popup.Popper, { placement: "top", portal: false, children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" }), _jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" })] })] }) })] })] }));
}
export const InlinePopupNoPortal = () => {
    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { cs: comparisonLayoutStyles, children: [_jsx(SingleInlinePopup, { overflowLabel: "overflow: visible", containerStyles: visibleContainerStyles }), _jsx(SingleInlinePopup, { overflowLabel: "overflow: clip", containerStyles: clipContainerStyles }), _jsx(SingleInlinePopup, { overflowLabel: "overflow: scroll", containerStyles: scrollContainerStyles })] }), _jsxs("p", { children: ["With ", _jsx("code", { children: "overflow: visible" }), ", the popup can extend past the dashed border. With", ' ', _jsx("code", { children: "overflow: scroll" }), " (or ", _jsx("code", { children: "hidden" }), " / ", _jsx("code", { children: "clip" }), "), the popup is constrained and any overflow is clipped. The container uses ", _jsx("code", { children: "position: relative" }), ' ', "so it establishes a containing block for the positioned popup."] })] }));
};
