import * as React from 'react';
import { Chrome } from './Chrome';
import { context } from './context';
import { ValueSyncStore } from '../../../util/events/sync-store';
export const RenderPeritext = ({ ctx, children }) => {
    const value = React.useMemo(() => ({
        ctx,
        score: new ValueSyncStore(0),
        scoreDelta: new ValueSyncStore(0),
        lastVisScore: new ValueSyncStore(0),
    }), [ctx]);
    React.useEffect(() => {
        const dom = ctx?.dom;
        if (!dom || !value)
            return;
        let lastNow = 0;
        const listener = (event) => {
            const now = Date.now();
            const timeDiff = now - lastNow;
            let delta = 0;
            switch (event.detail.ev?.type) {
                case 'delete':
                case 'insert':
                case 'format':
                case 'marker': {
                    delta = timeDiff < 30 ? 10 : timeDiff < 70 ? 5 : timeDiff < 150 ? 2 : timeDiff <= 1000 ? 1 : -1;
                    break;
                }
                default: {
                    delta = timeDiff <= 1000 ? 0 : -1;
                    break;
                }
            }
            if (delta)
                value.score.next(delta >= 0 ? value.score.value + delta : 0);
            value.scoreDelta.next(delta);
            lastNow = now;
        };
        dom.et.addEventListener('change', listener);
        return () => {
            dom.et.removeEventListener('change', listener);
        };
    }, [ctx?.dom, value]);
    return (React.createElement(context.Provider, { value: value },
        React.createElement(Chrome, null, children)));
};
//# sourceMappingURL=RenderPeritext.js.map