/* @oracle/oraclejet-preact: undefined */
import { jsx, Fragment, jsxs } from 'preact/jsx-runtime';
import { render, fireEvent, screen, waitFor } from '@testing-library/preact';
import '../../LayerHost-e6402730.js';
import { R as RootEnvironmentProvider } from '../../EnvironmentProvider-bada8909.js';
import { expect } from 'chai';
import { spy } from 'sinon';
import { useRef, useState, useCallback } from 'preact/hooks';
import userEvent from '@testing-library/user-event';
import { B as BaseButton } from '../../BaseButton-61f6baa8.js';
import { S as Sheet } from '../../Sheet-da412baf.js';
import { g as getClientHints } from '../../clientHints-f850225e.js';
import { B as Button } from '../../Button-f90514b2.js';
import '../../Common/themes/redwood/theme.js';
import '../../Common/themes/themeContract.css.js';
import 'preact';
import 'preact/compat';
import '../../UNSAFE_Layer/themes/LayerHostStyles.css.js';
import './../../LayerHostStyles.styles.css';
import '../../LayerManager-fa745cec.js';
import '../../usePress-051f5adb.js';
import '../../usePressClick-945cc43b.js';
import '../../useHover-19340c22.js';
import '../../useToggle-8b7fcefe.js';
import '../../useActive-fb6d4d52.js';
import '../../TabbableModeContext-7d8ad946.js';
import '../../useTabbableMode-a3a351d0.js';
import '../../useId-03dbfdf0.js';
import '../../useColorScheme-c4e237ad.js';
import '../../classNames-4e12b00d.js';
import '../../dimensions-d4159ace.js';
import '../../size-18139a3a.js';
import '../../utils-a4102e03.js';
import '../../colorUtils-16eb823f.js';
import '../../_curry1-25297e59.js';
import '../../mergeInterpolations-e2db2a66.js';
import '../../mergeDeepWithKey-08531060.js';
import '../../_curry3-0b4222d7.js';
import '../../_curry2-34316bcf.js';
import '../../_isObject-1fab0f5b.js';
import '../../mergeProps-88ea8306.js';
import '../../UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js';
import '../../UNSAFE_BaseButton/themes/BaseButtonStyles.css.js';
import './../../BaseButtonStyles.styles.css';
import '../../UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js';
import '../../vanilla-extract-recipes-createRuntimeFn.esm-2aaf8c98.js';
import './../../UNSAFE_BaseButton/themes/redwood/BaseButtonBaseTheme.styles.css';
import '../../useComponentTheme-d2f9e47f.js';
import '../../logger-c92f309c.js';
import '../../useTestId-9b504481.js';
import '../../Modal-24a0bf4b.js';
import '../../useModal-953082f2.js';
import '../../Layer-446bf21e.js';
import '../../UNSAFE_Layer/themes/LayerStyles.css.js';
import './../../LayerStyles.styles.css';
import '../../useThemeInterpolations-8dd8029f.js';
import '../../useScale-83881775.js';
import '../../theme-63551f30.js';
import '../../Theme-e6dec6db.js';
import '../../useDensity-c17603b2.js';
import '../../UNSAFE_Modal/themes/ModalStyles.css.js';
import './../../ModalStyles.styles.css';
import '../../tabbableUtils-6ceb767f.js';
import '../../head-6f17c50c.js';
import '../../_arity-be492b9e.js';
import '../../_isArray-694cc52d.js';
import '../../_isString-675f1de9.js';
import '../../popupUtils-58411a98.js';
import '../../WindowOverlay-a07b2e24.js';
import '../../vanilla-extract-dynamic.esm-2955d60a.js';
import '../../UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js';
import './../../WindowOverlayStyles.styles.css';
import '../../UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js';
import '../../useUser-1cd223a9.js';
import '../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js';
import '../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js';
import './../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css';
import '../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js';
import '../themes/SheetStyles.css.js';
import './../../SheetStyles.styles.css';
import '../../refUtils-b9d8d91a.js';
import '../../useAnimationStatus-a9337dd8.js';
import '../../useAnimation-a5eb7604.js';
import '../../animationUtils-e6081007.js';
import '../../ButtonLabelLayout-e9f8cbc0.js';
import '../../Text-f8d4ff78.js';
import '../../UNSAFE_Text/themes/TextStyles.css.js';
import './../../TextStyles.styles.css';
import '../../useButtonLabelLayoutTheme-a1b95a52.js';
import '../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js';
import '../../UNSAFE_ButtonLabelLayout/themes/ButtonLabelLayoutStyles.css.js';
import './../../ButtonLabelLayoutStyles.styles.css';
import '../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.css.js';
import './../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.styles.css';
import '../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js';
import './../../ButtonLabelLayoutVariants.styles.css';

//TODO: JET-63873
function getSheet(elem) {
    return elem.querySelector('#contentId');
}
function getSheetContainer(elem) {
    return elem.querySelector('#contentId').parentElement;
}
function getSheetScrim(sheetContainer) {
    return sheetContainer.parentElement?.parentElement?.parentElement?.firstElementChild;
}
const SheetSimpleComponent = ({ onClose }) => {
    const ref = useRef(null);
    return (jsx(Fragment, { children: jsxs(RootEnvironmentProvider, { children: [jsx(BaseButton, { ref: ref, children: "Open" }), jsx(Sheet, { isOpen: true, onClose: onClose, children: jsxs("div", { style: { display: 'flex', flexDirection: 'column', outlineStyle: 'none' }, id: "contentId", children: [jsx("h1", { children: "N1" }), jsx("h1", { children: "N2" }), jsx("h1", { children: "N3" }), jsx("h1", { children: "N4" })] }) })] }) }));
};
function IntitialFocusTestComponent() {
    const [isOpen, setIsOpen] = useState(false);
    const toggleButtonRef = useRef(null);
    const toggle = useCallback(() => {
        setIsOpen(!isOpen);
    }, [isOpen]);
    return (jsx(RootEnvironmentProvider, { children: jsxs("div", { style: {
                paddingTop: '90px',
                paddingBottom: '90px'
            }, children: [jsx(Sheet, { isOpen: isOpen, initialFocus: "firstFocusable", children: jsx("div", { style: { display: 'flex', flexDirection: 'column', outlineStyle: 'none' }, id: "contentId", children: jsx(Button, { "aria-label": "OK", label: "OK" }) }) }), jsx(Button, { ref: toggleButtonRef, onAction: toggle, label: "Toggle" })] }) }));
}
describe('Test Sheet Component', () => {
    it('Sheet content render correctly', async function () {
        const { container } = render(jsx(SheetSimpleComponent, {}));
        const sheetContent = getSheet(container);
        expect(sheetContent).not.null;
    });
    it('onClose called when Escape or Tab are pressed', async function () {
        const onActionDummyFunction = spy();
        const { container } = render(jsx(SheetSimpleComponent, { onClose: onActionDummyFunction }));
        const sheetContent = getSheet(container);
        const sheetContainer = getSheetContainer(container);
        expect(sheetContent).not.null;
        fireEvent.keyDown(sheetContainer, { code: 'Tab' });
        fireEvent.keyDown(sheetContainer, { code: 'Escape' });
        expect(onActionDummyFunction.calledTwice).to.be.true;
    });
    it('onClose called when clicking scrim', async function () {
        const onActionDummyFunction = spy();
        const { container } = render(jsx(SheetSimpleComponent, { onClose: onActionDummyFunction }));
        const sheetContent = getSheet(container);
        const sheetContainer = getSheetContainer(container);
        const sheetScrim = getSheetScrim(sheetContainer);
        expect(sheetContent).not.null;
        await userEvent.click(sheetScrim);
        expect(onActionDummyFunction.called).to.be.true;
    });
    it('onClose called when swipe is done (mobile)', async function () {
        const onActionDummyFunction = spy();
        const { container } = render(jsx(SheetSimpleComponent, { onClose: onActionDummyFunction }));
        const sheetContent = getSheet(container);
        const sheetContainer = getSheetContainer(container);
        expect(sheetContent).not.null;
        if (typeof jest === 'undefined' && getClientHints().touchSupport === 'primary') {
            // Touch objects are created so we can replicate this in fake touch events
            // This stuff is based on what useSwipe triggers and could change depending on the final decision
            // on what events to trigger on useSwipe.
            const touch1 = new Touch({
                target: sheetContainer,
                identifier: 0,
                pageX: 386,
                pageY: 224
            });
            const touch2 = new Touch({
                target: sheetContainer,
                identifier: 0,
                pageX: 389,
                pageY: 397
            });
            if (sheetContainer) {
                fireEvent.touchStart(sheetContainer, {
                    timeStamp: 10406,
                    currentTarget: sheetContainer,
                    changedTouches: [touch1]
                });
                fireEvent.touchEnd(sheetContainer, {
                    timeStamp: 10472,
                    currentTarget: sheetContainer,
                    changedTouches: [touch2]
                });
            }
            expect(onActionDummyFunction.called).to.be.true;
        }
    });
    it('Sheet correct focus when initialFocus set as firstFocusable', async function () {
        const { container } = render(jsx(IntitialFocusTestComponent, {}));
        const anchorButton = screen.getByRole('button');
        expect(anchorButton, 'anchor element found').not.null;
        if (anchorButton) {
            await userEvent.click(anchorButton);
        }
        await waitFor(() => {
            const sheet = getSheet(container);
            expect(sheet).not.to.be.null;
        });
        const okButton = screen.getByLabelText('OK');
        expect(okButton).not.to.be.null;
        if (typeof jest === 'undefined') {
            await waitFor(() => {
                expect(okButton.matches(':focus')).to.be.true;
            });
        }
    });
});
//# sourceMappingURL=Sheet.spec.js.map
