import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import { StringifyOptions } from 'querystring';
import * as React from 'react';
import { ColorState, SketchPicker } from 'react-color';
import { Doc, StrListCast } from '../../../../fields/Doc';
import { InkTool } from '../../../../fields/InkField';
import { createSchema, makeInterface } from '../../../../fields/Schema';
import { ScriptField } from '../../../../fields/ScriptField';
import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
import { DocumentType } from '../../../documents/DocumentTypes';
import { Scripting } from "../../../util/Scripting";
import { SelectionManager } from '../../../util/SelectionManager';
import { ColorScheme } from '../../../util/SettingsManager';
import { UndoManager } from '../../../util/UndoManager';
import { CollectionViewType } from '../../collections/CollectionView';
import { ContextMenu } from '../../ContextMenu';
import { DocComponent } from '../../DocComponent';
import { EditableView } from '../../EditableView';
import { Colors } from '../../global/globalEnums';
import { StyleProp } from '../../StyleProvider';
import { FieldView, FieldViewProps } from '.././FieldView';
import { RichTextMenu } from '../formattedText/RichTextMenu';
import './FontIconBox.scss';
const FontIconSchema = createSchema({
    icon: "string",
});

export enum ButtonType {
    MenuButton = "menuBtn",
    DropdownList = "drpdownList",
    DropdownButton = "drpdownBtn",
    ClickButton = "clickBtn",
    DoubleButton = "dblBtn",
    ToggleButton = "tglBtn",
    ColorButton = "colorBtn",
    ToolButton = "toolBtn",
    NumberButton = "numBtn",
    EditableText = "editableTxt"
}

export enum NumButtonType {
    Slider = "slider",
    DropdownOptions = "dropdown",
    Inline = "inline"
}

export interface ButtonProps extends FieldViewProps {
    type?: ButtonType;
}

type FontIconDocument = makeInterface<[typeof FontIconSchema]>;
const FontIconDocument = makeInterface(FontIconSchema);
@observer
export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(FontIconDocument) {
    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); }
    showTemplate = (): void => {
        const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
        dragFactory && this.props.addDocTab(dragFactory, "add:right");
    }
    dragAsTemplate = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)'); };
    useAsPrototype = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)'); };

    specificContextMenu = (): void => {
        if (!Doc.UserDoc().noviceMode) {
            const cm = ContextMenu.Instance;
            cm.addItem({ description: "Show Template", event: this.showTemplate, icon: "tag" });
            cm.addItem({ description: "Use as Render Template", event: this.dragAsTemplate, icon: "tag" });
            cm.addItem({ description: "Use as Prototype", event: this.useAsPrototype, icon: "tag" });
        }
    }

    // Determining UI Specs
    @observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
    @observable private icon = StrCast(this.dataDoc.icon, "user") as any;
    @observable private dropdown: boolean = BoolCast(this.rootDoc.dropDownOpen);
    @observable private buttonList: string[] = StrListCast(this.rootDoc.btnList);
    @observable private type = StrCast(this.rootDoc.btnType);

    /**
     * Types of buttons in dash:
     * - Main menu button (LHS)
     * - Tool button
     * - Expandable button (CollectionLinearView)
     * - Button inside of CollectionLinearView vs. outside of CollectionLinearView
     * - Action button
     * - Dropdown button 
     * - Color button
     * - Dropdown list
     * - Number button
    **/

    _batch: UndoManager.Batch | undefined = undefined;
    /**
     * Number button
     */
    @computed get numberButton() {
        const numType: string = StrCast(this.rootDoc.numType);
        const setValue = (value: number) => {
            // Script for running the toggle
            const script: string = StrCast(this.rootDoc.script) + "(" + value + ")";
            ScriptField.MakeScript(script)?.script.run();
        };

        // Script for checking the outcome of the toggle
        const checkScript: string = StrCast(this.rootDoc.script) + "(0, true)";
        const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result;


        if (numType === NumButtonType.Slider) {
            const dropdown =
                <div
                    className="menuButton-dropdownBox"
                    style={{ left: 0 }}
                >
                    <input type="range" step="1" min="0" max="100" value={checkResult}
                        className={"toolbar-slider"} id="duration-slider"
                        onPointerDown={() => { this._batch = UndoManager.StartBatch("presDuration"); }}
                        onPointerUp={() => { if (this._batch) this._batch.end(); }}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }}
                    />
                </div>;
            return (
                <div
                    className={`menuButton ${this.type} ${numType}`}
                    onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
                >
                    {checkResult}
                    {dropdown}
                </div>
            );
        } else if (numType === NumButtonType.DropdownOptions) {
            const items: number[] = [];
            for (let i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    items.push(i);
                }
            }
            items.map((value) => {
                return <div className="list-item" key={`${value}`}
                    style={{
                        backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined
                    }}
                    onClick={() => setValue(value)}>
                    {value}
                </div>;
            });
            return (
                <div
                    className={`menuButton ${this.type} ${numType}`}
                >
                    <div className="numBtn-subtract" onClick={action((e) => setValue(checkResult - 1))}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
                    </div>
                    <div
                        onPointerDown={(e) => e.stopPropagation()}
                        onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}
                    >
                        <input
                            style={{ width: 100 }}
                            className="input"
                            type="number"
                            value={checkResult}
                            onChange={action((e) => setValue(Number(e.target.value)))}
                        />
                    </div>
                    <div className="numBtn-plus" onClick={action((e) => setValue(checkResult + 1))}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
                    </div>
                    {this.rootDoc.dropDownOpen ?
                        <div>
                            <div className="menuButton-dropdownList"
                                style={{ left: 0 }}>
                                {items}
                            </div>
                            <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
                        </div> : null}

                </div>
            );
        } else {
            return (
                <div>

                </div>
            );
        }


    }

    /**
     * Dropdown button
     */
    @computed get dropdownButton() {
        const active: string = StrCast(this.rootDoc.dropDownOpen);
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        return (
            <div className={`menuButton ${this.type} ${active}`}
                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}>
                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
                <div
                    className="menuButton-dropdown"
                    style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
                    <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
                </div>
                {this.rootDoc.dropDownOpen ?
                    <div className="menuButton-dropdownBox"
                        style={{ left: 0 }}>
                        {/* DROPDOWN BOX CONTENTS */}
                    </div> : null}
            </div>
        );
    }

    /**
     * Dropdown list
     */
    @computed get dropdownListButton() {
        const active: string = StrCast(this.rootDoc.dropDownOpen);
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);

        const script: string = StrCast(this.rootDoc.script);

        let noviceList: string[] = [];
        let text: string | undefined;
        let dropdown = true;
        let icon: IconProp = "caret-down";


        if (script === 'changeView') {
            const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
            if (selected && StrCast(selected.Document.type) === DocumentType.COL) {
                text = StrCast(selected.Document._viewType);
            } else if (selected) {
                dropdown = false;
                text = StrCast(selected.Document.type);
                icon = Doc.toIcon(selected.Document);
            } else {
                text = "None selected";
            }
            noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
        } else if (script === 'changeFont') {
            const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
            if (selected && StrCast(selected.Document.type) === DocumentType.RTF) {
                text = StrCast(selected.Document._fontFamily);
            } else {
                const fontFamily = StrCast(Doc.UserDoc()._fontFamily);
                console.log(fontFamily);
                text = fontFamily;
            }
            noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
                "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
        }

        const items = this.buttonList.map((value) => {
            if (Doc.UserDoc().noviceMode && !noviceList.includes(value)) {
                return;
            }
            const click = () => {
                const s = ScriptField.MakeScript(script + '("' + value + '")');
                if (s) {
                    s.script.run().result;
                }
            };
            return <div className="list-item" key={`${value}`}
                style={{
                    fontFamily: script === 'changeFont' ? value : undefined,
                    backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined
                }}
                onClick={click}>
                {value[0].toUpperCase() + value.slice(1)}
            </div>;
        });

        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                {this.label}
            </div>;

        return (
            <div className={`menuButton ${this.type} ${active}`}
                style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}>
                <div className="menuButton-dropdown-header">
                    {text && text[0].toUpperCase() + text.slice(1)}
                </div>
                {label}
                <div
                    className="menuButton-dropDown"
                    style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
                    <FontAwesomeIcon icon={icon} color={color} size="sm" />
                </div>
                {this.rootDoc.dropDownOpen ?
                    <div>
                        <div className="menuButton-dropdownList"
                            style={{ left: 0 }}>
                            {items}
                        </div>
                        <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
                    </div>
                    : null}
            </div>
        );
    }

    /**
     * Color button
     */
    @computed get colorButton() {
        const active: string = StrCast(this.rootDoc.dropDownOpen);
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        const numSelected = SelectionManager.Views().length;
        const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;

        const script: string = StrCast(this.rootDoc.script);
        const scriptCheck: string = script + "(undefined, true)";
        const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
        console.log("[boolResul]: ", boolResult);

        const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
            '#FFFFFF', '#f1efeb', 'transparent'];

        const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={selectedDoc ? selectedDoc._backgroundColor : backgroundColor}
            presetColors={colorOptions} />;
        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                {this.label}
            </div>;
        const dropdownCaret = <div
            className="menuButton-dropDown"
            style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
            <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
        </div>;
        const click = (value: ColorState) => {
            const hex: string = value.hex;
            const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
            if (s) {
                s.script.run().result;
            }
        };
        return (
            <div className={`menuButton ${this.type} ${active}`}
                style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
                onPointerDown={e => e.stopPropagation()}>
                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                <div className="colorButton-color"
                    style={{ backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor }}
                ></div>
                {label}
                {/* {dropdownCaret} */}
                {this.rootDoc.dropDownOpen ?
                    <div>
                        <div className="menuButton-dropdownBox"
                            onPointerDown={e => e.stopPropagation()}
                            onClick={e => e.stopPropagation()}
                            style={{ left: 0 }}>
                            {colorBox(click)}
                        </div>
                        <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
                    </div>
                    : null}
            </div>
        );
    }

    @computed get toggleButton() {
        // Determine the type of toggle button
        const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);

        // Script for running the toggle
        const script: string = StrCast(this.rootDoc.script) + "()";
        // Script for checking the outcome of the toggle
        const checkScript: string = StrCast(this.rootDoc.script) + "(true)";

        // Function to run the script
        const runScript = () => ScriptField.MakeScript(script)?.script.run();
        const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result;

        // Colors
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);

        // Button label
        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                {this.label}
            </div>;
        console.log("switchToggle");
        return (
            !switchToggle ?
                <div className={`menuButton ${this.type}`}
                    style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }}
                    onClick={this.layoutDoc.ignoreClick ? runScript : undefined}
                >
                    <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
                    {label}
                </div> :
                <div>
                    <label className="switch">
                        <input type="checkbox"
                            checked={checkResult}
                            onChange={runScript}
                        />
                        <span className="slider round"></span>
                    </label>
                </div>
        );
    }



    /**
     * Default
     */
    @computed get defaultButton() {
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        const active: string = StrCast(this.rootDoc.dropDownOpen);
        return (
            <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu}
                style={{ backgroundColor: "transparent", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
                <div className="menuButton-wrap">
                    <FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={"black"} size={"sm"} />
                    {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
                </div>
            </div>
        );
    }

    @computed get editableText() {
        const setValue = (value: string, shiftDown?: boolean): boolean => {
            console.log("setValue");
            return true;
        };

        return <div className={`menuButton ${this.type}`}>
            <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} />
            <EditableView GetValue={() => ""} SetValue={setValue} contents="...">
            </EditableView>
        </div>;
    }


    render() {
        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
        // Variables called through eval (from button)
        const canUndo: boolean = UndoManager.CanUndo();
        const canRedo: boolean = UndoManager.CanRedo();
        const numSelected = SelectionManager.Views().length;
        const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
        const userDoc = Doc.UserDoc();


        const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;

        const active: string = StrCast(this.rootDoc.dropDownOpen);
        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                {this.label}
            </div>;
        const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                {this.label}
            </div>;

        // TODO:glr Add label of button type
        let button = this.defaultButton;

        switch (this.type) {
            case ButtonType.EditableText:
                button = this.editableText;
            case ButtonType.NumberButton:
                button = this.numberButton;
                break;
            case ButtonType.DropdownButton:
                button = this.dropdownButton;
                break;
            case ButtonType.DropdownList:
                button = this.dropdownListButton;
                break;
            case ButtonType.ColorButton:
                button = this.colorButton;
                break;
            case ButtonType.ToolButton:
                button = (
                    <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: backgroundColor, color: color }}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                        {label}
                    </div>
                );
                break;
            case ButtonType.ToggleButton:
                button = this.toggleButton;
                break;
            case ButtonType.ClickButton:
                button = (
                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                        {label}
                    </div>
                );
                break;
            case ButtonType.DoubleButton:
                button = (
                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                        {label}
                    </div>
                );
                break;
            case ButtonType.MenuButton:
                button = (
                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}>
                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                        {menuLabel}
                    </div >
                );
                break;
            default:
                break;
        }

        return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton ? button :
            <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
                {button}
            </Tooltip>;
    }
}


// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeView(view: string) {
    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
    selected ? selected.Document._viewType = view : console.log("[FontIconBox.tsx] changeView failed");
});

// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeBackgroundColor(color?: string, checkResult?: boolean) {
    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
    if (checkResult) {
        return selected && selected.Document._backgroundColor;
    }
    selected ? selected.Document._backgroundColor = color : console.log("[FontIconBox.tsx] changeBackgroundColor failed");
});

// toggle: Set overlay status of selected document
Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
    if (checkResult && selected) {
        return NumCast(selected.Document.z) === 1;
    }
    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
});

// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeFont(font: string) {
    SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font);
    Doc.UserDoc()._fontFamily = font;
    console.log(Doc.UserDoc()._fontFamily);
    return Doc.UserDoc()._fontFamily;
});

// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeFontColor(color?: string, checkResult?: boolean) {
    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
    if (checkResult) {
        if (selected) {
            console.log("[Font color] (selected): " + StrCast(selected.Document._fontColor));
            return selected.Document._fontColor;
        } else {
            console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
            return Doc.UserDoc()._fontColor;
        }
    }
    Doc.UserDoc()._fontColor = color;
});

// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeFontHighlight(color?: string, checkResult?: boolean) {
    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
    if (checkResult) {
        if (selected) {
            console.log("[Font color] (selected): " + StrCast(selected.Document._fontColor));
            return selected.Document._fontColor;
        } else {
            console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
            return Doc.UserDoc()._fontColor;
        }
    }
    Doc.UserDoc()._fontColor = color;
});


// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeFontSize(size: string, checkResult?: boolean) {
    if (checkResult) {
        const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10);
        return size;
    }
    console.log(size);
    Doc.UserDoc()._fontSize = size + "px";
});

Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
    if (checkResult) {
        return Doc.UserDoc().bold;
    }
    SelectionManager.Views().map(dv => dv.props.Document.bold = !dv.props.Document.bold);
    Doc.UserDoc().bold = !Doc.UserDoc().bold;
    return Doc.UserDoc().bold;
});

Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
    if (checkResult) {
        return Doc.UserDoc().underline;
    }
    SelectionManager.Views().map(dv => dv.props.Document.underline = !dv.props.Document.underline);
    Doc.UserDoc().bold = !Doc.UserDoc().underline;
    return Doc.UserDoc().underline;
});

Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
    if (checkResult) {
        return Doc.UserDoc().italic;
    }
    SelectionManager.Views().map(dv => dv.props.Document.italic = !dv.props.Document.italic);
    Doc.UserDoc().bold = !Doc.UserDoc().italic;
    return Doc.UserDoc().italic;
});

Scripting.addGlobal(function setActiveInkTool(tool: InkTool, checkResult?: boolean) {
    if (checkResult) {
        return Doc.UserDoc().activeInkTool === tool;
    }
    if (tool) {
        Doc.UserDoc().activeInkTool = tool;
    } else {
        Doc.UserDoc().activeInkTool = InkTool.None;
    }
});