import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useEffect, useState } from 'react';
import { watch } from '../utils/watchReactivity';
import copy from 'copy-to-clipboard';
export const DebugStore = ({ stateManager, }) => {
    const [store, setStore] = useState(stateManager.store);
    useEffect(() => {
        setStore(Object.assign({}, stateManager.store));
        watch(stateManager.store, newValue => {
            setTimeout(() => {
                setStore(Object.assign({}, newValue));
            }, 0);
        });
    }, []);
    return _jsx("pre", { children: JSON.stringify(store, null, 2) }, void 0);
};
export const DebugEvent = ({ apiService }) => {
    const [events, setEvents] = useState([]);
    useEffect(() => {
        const handler = (type, event) => {
            setEvents(cur => cur.concat({ type, event, t: new Date() }));
        };
        apiService.on('*', handler);
        return () => apiService.off('*', handler);
    }, []);
    return (_jsxs("div", { children: [_jsx("div", { children: _jsx("button", Object.assign({ onClick: () => {
                        copy(JSON.stringify(events));
                    } }, { children: "copy test case" }), void 0) }, void 0), _jsx("div", Object.assign({ style: {
                    padding: '0.5em',
                    border: '2px solid black',
                    maxHeight: '200px',
                    overflow: 'auto',
                } }, { children: events.map((event, idx) => (_jsx("pre", { children: JSON.stringify(event) }, idx))) }), void 0)] }, void 0));
};
//# sourceMappingURL=DebugComponents.js.map