import * as React from 'react';
import { rule } from 'nano-theme';
import { useDebugCtx } from '../context';
import { ButtonGroup } from '../../../components/ButtonGroup';
import { Button } from '../../../components/Button';
import { useSyncStore } from '../../../web/react/hooks';
const consoleClass = rule({
    bxz: 'border-box',
    bg: '#fafafa',
    fz: '8px',
    mr: '8px 0',
    pd: '8px 16px',
    bdrad: '8px',
    lh: '1.3em',
});
export const Console = () => {
    const { ctx, flags } = useDebugCtx();
    const dom = useSyncStore(flags.dom);
    const editor = useSyncStore(flags.editor);
    const peritext = useSyncStore(flags.peritext);
    const model = useSyncStore(flags.model);
    if (!ctx)
        return null;
    return (React.createElement("div", { className: consoleClass },
        React.createElement(ButtonGroup, null,
            React.createElement(Button, { small: true, active: dom, onClick: () => flags.dom.next(!dom) }, "DOM"),
            React.createElement(Button, { small: true, active: editor, onClick: () => flags.editor.next(!editor) }, "Editor"),
            React.createElement(Button, { small: true, active: peritext, onClick: () => flags.peritext.next(!peritext) }, "Peritext"),
            React.createElement(Button, { small: true, active: model, onClick: () => flags.model.next(!model) }, "Model")),
        !!dom && React.createElement("pre", null, ctx.dom + ''),
        !!editor && React.createElement("pre", null, ctx.peritext.editor + ''),
        !!peritext && React.createElement("pre", null, ctx.peritext + ''),
        !!model && React.createElement("pre", null, ctx.peritext.model + '')));
};
//# sourceMappingURL=index.js.map