"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TopToolbar = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Button_1 = require("../../../components/Button");
const json_crdt_extensions_1 = require("../../../../json-crdt-extensions");
const ButtonGroup_1 = require("../../../components/ButtonGroup");
const hooks_1 = require("../../../web/react/hooks");
const ButtonSeparator_1 = require("../../../components/ButtonSeparator");
const TopToolbar = ({ ctx }) => {
    const peritext = ctx.peritext;
    const editor = peritext.editor;
    const pending = (0, hooks_1.useSyncStore)(editor.pending);
    if (!ctx.dom)
        return null;
    const cursor = editor.mainCursor();
    const [complete] = cursor ? peritext.overlay.stat(cursor) : [new Set()];
    const inlineGroupButton = (type, name) => (React.createElement(Button_1.Button, { onClick: () => ctx.dom?.et.format('tog', type), onMouseDown: (e) => e.preventDefault(), active: (complete.has(type) && !pending?.has(type)) || (!complete.has(type) && pending?.has(type)) }, name));
    const button = (name, onClick) => (React.createElement(Button_1.Button, { onClick: onClick, onMouseDown: (e) => e.preventDefault() }, name));
    const blockGroupButtom = (type, name) => (React.createElement(Button_1.Button
    // onClick={() => ctx.dom?.et.marker({action: 'tog', type})}
    , { 
        // onClick={() => ctx.dom?.et.marker({action: 'tog', type})}
        onClick: () => { }, onMouseDown: (e) => e.preventDefault(), active: (complete.has(type) && !pending?.has(type)) || (!complete.has(type) && pending?.has(type)) }, name));
    return (React.createElement(ButtonGroup_1.ButtonGroup, { style: { marginBottom: 8 } },
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.b, 'Bold'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.i, 'Italic'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.u, 'Underline'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.overline, 'Overline'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.s, 'Strikethrough'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.code, 'Code'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.mark, 'Mark'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.del, 'Deleted'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.ins, 'Inserted'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.sup, 'Superscript'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.sub, 'Subscript'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.math, 'Math'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.kbd, 'Key'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.spoiler, 'Spoiler'),
        inlineGroupButton(json_crdt_extensions_1.CommonSliceType.bookmark, 'Bookmark'),
        React.createElement(ButtonSeparator_1.ButtonSeparator, null),
        button('Blue', () => {
            ctx.dom?.et.format('tog', json_crdt_extensions_1.CommonSliceType.col, 'one', '#07f');
        }),
        React.createElement(ButtonSeparator_1.ButtonSeparator, null),
        button('Erase', () => {
            ctx.dom?.et.format({ action: 'erase' });
        }),
        button('Clear', () => {
            ctx.dom?.et.format({ action: 'del' });
        }),
        button('Delete block split', () => {
            ctx.dom?.et.marker({ action: 'del' });
        }),
        React.createElement(ButtonSeparator_1.ButtonSeparator, null),
        blockGroupButtom(json_crdt_extensions_1.CommonSliceType.p, 'Paragraph'),
        blockGroupButtom(json_crdt_extensions_1.CommonSliceType.blockquote, 'Blockquote'),
        blockGroupButtom(json_crdt_extensions_1.CommonSliceType.codeblock, 'Code Block')));
};
exports.TopToolbar = TopToolbar;
//# sourceMappingURL=index.js.map