/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var preact = require('@testing-library/preact');
require('../../LayerHost-8ec73638.js');
var EnvironmentProvider = require('../../EnvironmentProvider-753342f1.js');
var chai = require('chai');
var Sinon = require('sinon');
var hooks = require('preact/hooks');
var userEvent = require('@testing-library/user-event');
var BaseButton = require('../../BaseButton-590432e4.js');
var Sheet = require('../../Sheet-78113d87.js');
var clientHints = require('../../clientHints-89c01238.js');
var Button = require('../../Button-2427b7df.js');
require('../../Common/themes/redwood/theme.js');
require('../../Common/themes/themeContract.css.js');
require('preact');
require('preact/compat');
require('../../UNSAFE_Layer/themes/LayerHostStyles.css.js');

require('../../LayerManager-4857dbaf.js');
require('../../usePress-886180e4.js');
require('../../usePressClick-7a34624a.js');
require('../../useHover-c099039f.js');
require('../../useToggle-3ebba7d8.js');
require('../../useActive-6770f917.js');
require('../../TabbableModeContext-e99d527e.js');
require('../../useTabbableMode-5c8fd9e5.js');
require('../../useId-6c0eeb27.js');
require('../../useColorScheme-b4de9e67.js');
require('../../classNames-c14c6ef3.js');
require('../../dimensions-b4be9793.js');
require('../../size-0056ef1a.js');
require('../../utils-606327d1.js');
require('../../colorUtils-fe6f2fbf.js');
require('../../_curry1-e8f0d7ea.js');
require('../../mergeInterpolations-6727b536.js');
require('../../mergeDeepWithKey-210b024d.js');
require('../../_curry3-18677bca.js');
require('../../_curry2-c15d89cd.js');
require('../../_isObject-28636267.js');
require('../../mergeProps-e3da7237.js');
require('../../UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js');
require('../../UNSAFE_BaseButton/themes/BaseButtonStyles.css.js');

require('../../UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js');
require('../../vanilla-extract-recipes-createRuntimeFn.esm-d1301b2d.js');

require('../../useComponentTheme-082fc8e4.js');
require('../../logger-2b636482.js');
require('../../useTestId-32c35bff.js');
require('../../Modal-64a0608b.js');
require('../../useModal-0739a528.js');
require('../../Layer-2352de5e.js');
require('../../UNSAFE_Layer/themes/LayerStyles.css.js');

require('../../useThemeInterpolations-e3c7807c.js');
require('../../useScale-779458a9.js');
require('../../theme-dfd6a9fe.js');
require('../../Theme-f06687af.js');
require('../../useDensity-301606ec.js');
require('../../UNSAFE_Modal/themes/ModalStyles.css.js');

require('../../tabbableUtils-66ae6ba3.js');
require('../../head-68d0992f.js');
require('../../_arity-c228159c.js');
require('../../_isArray-73160ad5.js');
require('../../_isString-f4443c9e.js');
require('../../popupUtils-79b1d484.js');
require('../../WindowOverlay-7ef8a86f.js');
require('../../vanilla-extract-dynamic.esm-d5dffce7.js');
require('../../UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js');

require('../../UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js');
require('../../useUser-c85f9587.js');
require('../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js');
require('../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js');

require('../../UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js');
require('../themes/SheetStyles.css.js');

require('../../refUtils-915b985d.js');
require('../../useAnimationStatus-e55dfa64.js');
require('../../useAnimation-fb11e4cc.js');
require('../../animationUtils-54852d03.js');
require('../../ButtonLabelLayout-b421d34a.js');
require('../../Text-15923d58.js');
require('../../UNSAFE_Text/themes/TextStyles.css.js');

require('../../useButtonLabelLayoutTheme-b7b3bdb6.js');
require('../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js');
require('../../UNSAFE_ButtonLabelLayout/themes/ButtonLabelLayoutStyles.css.js');

require('../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.css.js');

require('../../UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js');


function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var userEvent__default = /*#__PURE__*/_interopDefaultLegacy(userEvent);

//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 = hooks.useRef(null);
    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(EnvironmentProvider.RootEnvironmentProvider, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ref: ref, children: "Open" }), jsxRuntime.jsx(Sheet.Sheet, { isOpen: true, onClose: onClose, children: jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', outlineStyle: 'none' }, id: "contentId", children: [jsxRuntime.jsx("h1", { children: "N1" }), jsxRuntime.jsx("h1", { children: "N2" }), jsxRuntime.jsx("h1", { children: "N3" }), jsxRuntime.jsx("h1", { children: "N4" })] }) })] }) }));
};
function IntitialFocusTestComponent() {
    const [isOpen, setIsOpen] = hooks.useState(false);
    const toggleButtonRef = hooks.useRef(null);
    const toggle = hooks.useCallback(() => {
        setIsOpen(!isOpen);
    }, [isOpen]);
    return (jsxRuntime.jsx(EnvironmentProvider.RootEnvironmentProvider, { children: jsxRuntime.jsxs("div", { style: {
                paddingTop: '90px',
                paddingBottom: '90px'
            }, children: [jsxRuntime.jsx(Sheet.Sheet, { isOpen: isOpen, initialFocus: "firstFocusable", children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', outlineStyle: 'none' }, id: "contentId", children: jsxRuntime.jsx(Button.Button, { "aria-label": "OK", label: "OK" }) }) }), jsxRuntime.jsx(Button.Button, { ref: toggleButtonRef, onAction: toggle, label: "Toggle" })] }) }));
}
describe('Test Sheet Component', () => {
    it('Sheet content render correctly', async function () {
        const { container } = preact.render(jsxRuntime.jsx(SheetSimpleComponent, {}));
        const sheetContent = getSheet(container);
        chai.expect(sheetContent).not.null;
    });
    it('onClose called when Escape or Tab are pressed', async function () {
        const onActionDummyFunction = Sinon.spy();
        const { container } = preact.render(jsxRuntime.jsx(SheetSimpleComponent, { onClose: onActionDummyFunction }));
        const sheetContent = getSheet(container);
        const sheetContainer = getSheetContainer(container);
        chai.expect(sheetContent).not.null;
        preact.fireEvent.keyDown(sheetContainer, { code: 'Tab' });
        preact.fireEvent.keyDown(sheetContainer, { code: 'Escape' });
        chai.expect(onActionDummyFunction.calledTwice).to.be.true;
    });
    it('onClose called when clicking scrim', async function () {
        const onActionDummyFunction = Sinon.spy();
        const { container } = preact.render(jsxRuntime.jsx(SheetSimpleComponent, { onClose: onActionDummyFunction }));
        const sheetContent = getSheet(container);
        const sheetContainer = getSheetContainer(container);
        const sheetScrim = getSheetScrim(sheetContainer);
        chai.expect(sheetContent).not.null;
        await userEvent__default["default"].click(sheetScrim);
        chai.expect(onActionDummyFunction.called).to.be.true;
    });
    it('onClose called when swipe is done (mobile)', async function () {
        const onActionDummyFunction = Sinon.spy();
        const { container } = preact.render(jsxRuntime.jsx(SheetSimpleComponent, { onClose: onActionDummyFunction }));
        const sheetContent = getSheet(container);
        const sheetContainer = getSheetContainer(container);
        chai.expect(sheetContent).not.null;
        if (typeof jest === 'undefined' && clientHints.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) {
                preact.fireEvent.touchStart(sheetContainer, {
                    timeStamp: 10406,
                    currentTarget: sheetContainer,
                    changedTouches: [touch1]
                });
                preact.fireEvent.touchEnd(sheetContainer, {
                    timeStamp: 10472,
                    currentTarget: sheetContainer,
                    changedTouches: [touch2]
                });
            }
            chai.expect(onActionDummyFunction.called).to.be.true;
        }
    });
    it('Sheet correct focus when initialFocus set as firstFocusable', async function () {
        const { container } = preact.render(jsxRuntime.jsx(IntitialFocusTestComponent, {}));
        const anchorButton = preact.screen.getByRole('button');
        chai.expect(anchorButton, 'anchor element found').not.null;
        if (anchorButton) {
            await userEvent__default["default"].click(anchorButton);
        }
        await preact.waitFor(() => {
            const sheet = getSheet(container);
            chai.expect(sheet).not.to.be.null;
        });
        const okButton = preact.screen.getByLabelText('OK');
        chai.expect(okButton).not.to.be.null;
        if (typeof jest === 'undefined') {
            await preact.waitFor(() => {
                chai.expect(okButton.matches(':focus')).to.be.true;
            });
        }
    });
});
//# sourceMappingURL=Sheet.spec.js.map
