"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderPeritext = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const context_1 = require("./context");
const Button_1 = require("../../components/Button");
const Console_1 = require("./Console");
const sync_store_1 = require("../../../util/events/sync-store");
const hooks_1 = require("../../web/react/hooks");
const state_1 = require("./state");
const constants_1 = require("../../web/constants");
const blockClass = (0, nano_theme_1.rule)({
    pos: 'relative',
});
const blockClassEnabled = (0, nano_theme_1.rule)({
    pos: 'relative',
    ['& .' + constants_1.CssClass.Inline]: {
        'caret-color': 'red',
        '::selection': {
            bgc: 'red',
        },
    },
    ['& .' + constants_1.CssClass.Editable]: {
        '&:focus': {
            out: '2px solid blue',
        },
    },
});
const btnClass = (0, nano_theme_1.drule)({
    d: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    pos: 'absolute',
    t: '-16px',
    r: 0,
    pd: '2px',
    bdrad: '8px',
    bxsh: '0 1px 8px #00000008,0 1px 4px #0000000a,0 4px 10px #0000000f',
});
const childrenDebugClass = (0, nano_theme_1.rule)({
    out: '1px dotted black !important',
});
const RenderPeritext = ({ state: state_, ctx, button, children }) => {
    const theme = (0, nano_theme_1.useTheme)();
    const state = React.useMemo(() => state_ ?? new state_1.DebugState(), [state_]);
    const enabled = (0, hooks_1.useSyncStore)(state.enabled);
    const value = React.useMemo(() => ({
        state,
        ctx,
        flags: {
            dom: new sync_store_1.ValueSyncStore(true),
            editor: new sync_store_1.ValueSyncStore(true),
            peritext: new sync_store_1.ValueSyncStore(false),
            model: new sync_store_1.ValueSyncStore(false),
        },
    }), [state, ctx]);
    return (React.createElement(context_1.context.Provider, { value: value },
        React.createElement("div", { className: blockClass + (enabled ? blockClassEnabled : ''), onKeyDown: (event) => {
                switch (event.key) {
                    case 'D': {
                        if (event.ctrlKey) {
                            event.preventDefault();
                            state.toggleDebugMode();
                        }
                        break;
                    }
                }
            } },
            !!button && (React.createElement("div", { className: btnClass({
                    bg: theme.bg,
                }) },
                React.createElement(Button_1.Button, { small: true, active: state.enabled.getSnapshot(), onClick: () => state.enabled.next(!state.enabled.getSnapshot()) }, "Debug"))),
            React.createElement("div", { className: state.enabled.getSnapshot() ? childrenDebugClass : undefined }, children),
            state.enabled.getSnapshot() && React.createElement(Console_1.Console, null))));
};
exports.RenderPeritext = RenderPeritext;
//# sourceMappingURL=RenderPeritext.js.map